GridPanel列表（鼠标悬浮在某行的列上，以div方式显示此单元格详情）

方法一：

Ext.QuickTips.init();

 

 

 function showDiv(value, cellmeta, record, rowIndex, columnIndex, store){

        if(value!=null && value!=""){

        return '<div ext:qtitle="" ext:qtip="'+value+'">'+value+'</div>';

        }

//     cellmata.attr='ext:qtip="'+value+'"';

//     return value;

    }

 

某个column加上renderer:showDiv

 

 

 

方法二：

 

定义列的时候加个 renderer，例 

 

{  

     header : '序号',  

     dataIndex : 'ind',  

     renderer: function(value, meta, record) {  

         meta.attr = 'style="white-space:normal;"';   

         return value;   

    }

}

使用自动换行又会带来一个新的问题，那就是不需要换行的列在竖直方向上没有居中显示，而是靠上对齐，要想在竖直方向上居中显示还得改下 grid 的样式，本人不赞成直接修改 ext-all.css，一个是尊重人家的版权，还有就是改多了，以后自己都记不清。那么要想改过成单元格都竖直居中，只需在页面或者自己的样式定义里面重写一个样式即可: 

<style type="text/css">

        .x-grid3-row td, .x-grid3-summary-row td {

                line-height:13px;

                vertical-align: middle;

                padding-left:1px;

                padding-right:1px;

                -moz-user-select: none;

                -khtml-user-select:none;

                -webkit-user-select:ignore;

        }

</style>

其实看过原码就知道了，里面只有 vertical-align: middle; 才是设置对齐用的，其他的都是原来定义的样式，只是把这个对齐由原来的 top 改成了 middle 而已。这样就能既达到了有些列自动换行的目的，而且又不影响到 grid 的美观了。