[转载]ExtJs疑难杂症之GridPanel单元格不能选中复制问题

今天遇到grid复制的问题，在网上找到了一个解决办法，只需改下CSS和JS，给大家分享一下：
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/dy_paradise/archive/2010/01/19/5212389.aspx

Ext.grid.GridPanel有一个重大缺陷，就是单元格的内容不能选中，没法选中就没法复制，给用户带来很多不便。

分析： 用IE Developer Toolbar打开ExtJs输出的代码研究了一下，发现每个单元格的div都有一个属性：unselectable="on"，看来是css在作怪。

版本： 2.2 (也适用v3+)

解决办法： extJs官方论坛上有具体的解决办法，比较可行的如下。

step1：添加新的css样式。

<style type= "text/css" >    
    .x-selectable, .x-selectable * {    
        -moz-user-select: text! important ;    
        -khtml-user-select: text! important ;    
    }    
</style>

  

step2：修改Ext.grid.GridPanel的protoType，我是自己写了一个新的js文件，记得要在ext-all.js后面引入。

if  (!Ext.grid.GridView.prototype.templates) {    
    Ext.grid.GridView.prototype.templates = {};    
}    
Ext.grid.GridView.prototype.templates.cell =  new  Ext.Template(    
     '<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} x-selectable {css}" style="{style}" tabIndex="0" {cellAttr}>' ,    
     '<div class="x-grid3-cell-inner x-grid3-col-{id}" {attr}>{value}</div>' ,    
     '</td>'    
);

  
done!现在GridPanel的单元格可以选中了。

评论

2 楼 Sunshine_Rozen 2012-11-16  

  楼主 ，怎么能不让他复制列后面的按钮，还有隐藏的值啊。

1 楼 tipx 2010-11-09  

按转载的文章，直接覆盖后，导致grid中的rowBody不能使用。。。

为了避免rowBody不能使用，新建一个View类，继承GridView，然后修改新类的prototype.templates属性值，这样在需要能选中列的Grid中使用新的view对象就可以了。

Ext.ns('Ext.ux.grid');
Ext.ux.grid.CellSelectView = Ext.extend(Ext.grid.GridView, {});
if  (!Ext.ux.grid.CellSelectView.prototype.templates) {
    Ext.ux.grid.CellSelectView.prototype.templates = {};
}
Ext.ux.grid.CellSelectView.prototype.templates.cell =  new Ext.Template(
     '<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} x-selectable {css}" style="{style}" tabIndex="0" {cellAttr}>' ,
     '<div class="x-grid3-cell-inner x-grid3-col-{id}" {attr}>{value}</div>' ,
     '</td>'
);