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',  75, dataIndex: 'price'},
        {text: 'Change',  75, dataIndex: 'change'}
    ],
    height: 200,
     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;    
    }    

 以上转至 https://blog.csdn.net/zen_123/article/details/38664155