extjs gridpanel 单元格内容全部显示

如果ext grid panel 中单元格数据过长，ext会以“...”的形式显示，可以通过Ext.tip.ToolTip 插件来显示，官网的例子：

http://docs.sencha.com/extjs/4.0.7/#!/api/Ext.tip.ToolTip

var grid = Ext.create('Ext.grid.Panel', {
    title: 'Array Grid',
    store: store,
    columns: [
        {text: 'Company', flex: 1, dataIndex: 'company'},
        {text: 'Price', width: 75, dataIndex: 'price'},
        {text: 'Change', width: 75, dataIndex: 'change'}
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

grid.getView().on('render', function(view) {
    view.tip = Ext.create('Ext.tip.ToolTip', {
        // The overall target element.
        target: view.el,
        // Each grid row causes its own seperate show and hide.
        delegate: view.itemSelector,
        // Moving within the row should not hide the tip.
        trackMouse: true,
        // Render immediately so that tip.body can be referenced prior to the first show.
        renderTo: Ext.getBody(),
        listeners: {
            // Change content dynamically depending on which element triggered the show.
            beforeshow: function updateTipBody(tip) {
                tip.update('Over company "' + view.getRecord(tip.triggerElement).get('company') + '"');
            }
        }
    });
});

也可以通过renderer 属性来显示：

//在代码开始时初始化这个提示组建 
Ext.QuickTips.init(null,{bodyStyle:'background:#ffc',border : 1,style : {borderColor:'black',borderStyle:'solid'}});

在columns 对象里面复写render方法 如 ：
renderer : function(v, metadata, record, rowIndex, columnIndex, store){
	var value = Ext.htmlEncode(v);
	value = value == null ? '':value;
	metadata.attr = ' data-qtip="' + value+ '"'
        return "<div class='reply-text' data-qtip='"+value+"' >"+value+"</div>";
}

或者这样写：

function fullMessage(val, metadata){  
    var value = Ext.htmlEncode(val);  
    value = value == null ? '':value;  
    value = "<div style='table-layout:fixed;word-wrap:break-word;word-break:break-all;'>"+value+"</div>";//防止不自动换行
    metadata.tdAttr = 'data-qtip="' + value+ '"'  
    
	return value;  
}