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:

<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

 

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的默认属性,可以使用以下代码:

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.看下源码:

//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