提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

extjs表格文本启用选择复制功能具体实现

实现 功能 选择 复制 文本 表格 具体 启用
2023-06-13 09:15:06 时间
extjs提供了方便的表格组件grid供使用，但是默认情况下表格中的文本是不能被选中的，自然也是无法复制的。

而选择复制文本的需要也是很平常的，于是我们就需要自己动手来解决这个问题，实现extjs的grid文本选择复制功能。

说明一点，文中所列出的代码片断都是在当前ext4.0.2a版本下的，其它版本未做测试，请自行斟酌。

首先自定义一下样式，来覆盖默认的css样式：
复制代码代码如下:

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

复写extjs的table类，阻止鼠标选择文本的就是这个unselectable
复制代码代码如下:

/**
*overridethetableclass
*/
Ext.override(Ext.view.Table,{
afterRender:function(){
varme=this;
me.callParent();
me.mon(me.el,{
scroll:me.fireBodyScroll,
scope:me
});
if(!me.featuresMC&&(me.featuresMC.findIndex("ftype","unselectable")>=0)){
me.el.unselectable();
}
me.attachEventsForFeatures();
}
});

然后再自定义一个feature，启用文本选择功能，通过替换取消unselectable样式，同时增加x-selectable样式
复制代码代码如下:
/**
*definetheselectfeature
*/
Ext.define("Myext.grid.SelectFeature",{
extend:"Ext.grid.feature.Feature",
alias:"feature.selectable",
mutateMetaRowTpl:function(metaRowTpl){
vari,ln=metaRowTpl.length;
for(i=0;i<ln;i++){
tpl=metaRowTpl[i];
tpl=tpl.replace(/x-grid-row/,"x-grid-rowx-selectable");
tpl=tpl.replace(/x-grid-cell-innerx-unselectable/g,"x-grid-cell-inner");
tpl=tpl.replace(/unselectable="on"/g,"");
metaRowTpl[i]=tpl;
};
}
});

现在可以声明一个selectFeature了

varselectFeature=Ext.create("Myext.grid.SelectFeature");

需要启用文本选择的表格，在创建时添加这个feature就可以了
复制代码代码如下:
Ext.create("Ext.grid.Panel",{
title:"gridexample",
store:gridStore,//definebefore
width:600,
height:300,
features:[selectFeature],
columns:[{
text:"name",
dataIndex:"name"
}]
//othercode
}

相关文章