如何实现Extjs的grid单元格只让选择（即可以复制单元格内容）但是不让修改？

来源：互联网发布：腾讯视频有mac版本吗编辑：程序博客网时间：2024/05/16 08:41

转载链接：http://www.zhihu.com/question/2001798

我只替换了CSS就解决了单元格复制问题，使用的是Ext 4.2版。

原文如下：

1、css代码：
<style type="text/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}><div unselectable="on" class="' + Ext.baseCSSPrefix + 'grid-cell-inner ' + Ext.baseCSSPrefix + 'unselectable" style="{{id}-style}; text-align: {align};">{{id}}</div></td>',
'</tpl>',
'</tr>'
]//3、把unselectable="on"改成unselectable=""
...
});
这直接修改extjs4.0源代码不怎么友好，但本人extjs水平有限，还望大家提供方法修改。。
（以上在extjs4.0.2a测试通过)

0 0