ExtJS Grid 可以取舍文字方法 _JavaScript

ExtJS Grid 可以选择文字方法

How to select text in the grid (with the mouse) so that it can be copied to the clipboard

1.相关帖子:http://extjs.com/forum/showthread.php?p=154426#post154426

2.下面是Condor 使用的方法:

首先添加CSS:

Html代码

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

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

然后在grid的配置中使用该css

Js代码

var?grid?=?new?Ext.grid.GridPanel({ ??
???viewConfig:?{ ??
??????templates:?{ ??
?????????cell:?new?Ext.Template( ??
????????????'<td?class="x-grid3-col?x-grid3-cell?x-grid3-td-{id}?<SPAN?style="COLOR:?#808000">x-selectable</SPAN> ??
?{css}"?style="{style}"?????????????????????????tabIndex="0"?{cellAttr}>', ??
???????????????'<div?class="x-grid3-cell-inner?x-grid3-col-{id}"?{attr}>{value}</div>', ??
????????????'</td>'??
?????????) ??
??????} ??
???}, ??
???... ??
});??

var grid = new Ext.grid.GridPanel({
   viewConfig: {
      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>'
         )
      }
   },
   ...
});

3.如果你想把它设置为GRID的默认属性,可以使用以下代码:

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>'??
);??

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>'
);

?译者注:紧跟ext-all.js的后面

4.如果你也想让表头文字可选,则可以相应的修改hcell模板;

5.如果你使用的是分组Grid,则需要把以上的模板定义放入到GroupingView的配置中去,而不是上文的viewConfig

译注:

1.看下源码:

Js代码

//GridView?288行 ??
if(!ts.cell){ ??
??ts.cell?=?new?Ext.Template( ??
????'<td?class="x-grid3-col?x-grid3-cell?x-grid3-td-{id}?{css}"?style="{style}"?tabIndex="0"?{cellAttr}>', ??
??????'<div?class="x-grid3-cell-inner?x-grid3-col-{id}"?<SPAN?style="COLOR:?#808000">unselectable="on"</SPAN> ??
?{attr}>{value}</div>', ??
????'</td>'??
??); ??
}??

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

?可知,以上的修改就是把unselectable去掉,并且在td的class里面多加了我们的x-selectable

2.进一步的,如果需要只针对某些列可选:

??? 2.1在该列的renderer(value,meta)里面,添加一句meta.selectable=true

??? 2.2再编辑下cell的模板,在里面判断{selectable?'someCssClass':''}

深圳人才网?深圳招聘网?深圳人才招聘网?深圳人才大市场?

企业、个人免费注册，获取想要的?深圳?软件工程师招聘信息月薪最低3000-8000，更有高端猎头职位！?

www.szrcwz.com???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

?? ? ? ? ? ? ? ? ?