修改extjs源码真正解决：ExtJs4.0 GridPanel 数据内容不能选中复制。

最新推荐文章于 2017-11-07 10:38:56 发布

Tree-New_Bee

最新推荐文章于 2017-11-07 10:38:56 发布

阅读量1.6k

点赞数

文章标签：浏览器 extjs4 源码 css bug

本文介绍了解决ExtJS Grid中复制表格数据的问题，通过覆盖CSS样式和修改ExtJS源码来实现对不同浏览器的支持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

extJS 现在依然存在很多bug，有时挺烦人的。比如，最近就需要复制表格信息，extjs的grid却不支持，研究半天，覆盖了css，但只在非ie的浏览器有效。修改了extjs源码才解决了在ie的问题。

1、添加以下css代码：

       .x-grid-row
        {
           line-height:13px;vertical-align:top;padding:0 1px;-moz-user-select:text!important;-khtml-user-select:text!important;-webkit-user-select:text!important;
        }
        .x-grid-cell
        {
           overflow:hidden;font:normal 13px tahoma, arial, verdana,sans-serif;-moz-user-select:text!important;-khtml-user-select:text!important;-webkit-user-select:text!important;
        }
        .x-unselectable
        {
           -moz-user-select:text!important;-khtml-user-select:text!important;-webkit-user-select:text!important;
        }

</style>

2、修改extjs4.0的ext-all.js(或ext-all-debug.js)三处代码：

找到　Ext.override(Ext.core.Element,{

　　　　....

            unselectable: function(){
               var me = this;
               me.dom.unselectable = "on";//1、把me.dom.unselectable= "on"修改为me.dom.unselectable =""
               me.swallowEvent("selectstart", true);//2、把ture改成false
               me.applyStyles("-moz-user-select:none;-khtml-user-select:none;");
               me.addCls(Ext.baseCSSPrefix + 'unselectable');
               return me;
            }

　　　　...
});
找到 Ext.override(Ext.view.TableChunker, {

　　　　...

            metaRowTpl:[
               '<tr class="' + Ext.baseCSSPrefix + 'grid-row {addlSelector}{[this.embedRowCls()]}" {[this.embedRowAttr()]}>',
                   '<tpl for="columns">',
                       '<td class="{cls} ' + Ext.baseCSSPrefix + 'grid-cell ' +Ext.baseCSSPrefix + 'grid-cell-{columnId} {{id}-modified} {{id}-tdCls}{[this.firstOrLastCls(xindex, xcount)]}" {{id}-tdAttr}><divunselectable="on" //3、把此处的unselectable="on"改成unselectable="" class="' + Ext.baseCSSPrefix +'grid-cell-inner ' + Ext.baseCSSPrefix + 'unselectable"style="{{id}-style}; text-align:{align};">{{id}}</div></td>',
                   '</tpl>',
               '</tr>'
            ]

　　　　...
});