ExtJS Grid 選擇文字以便複製

原文:http://extjs.com/learn/Ext_FAQ_Grid#How_to_select_text_in_the_grid_.28with_the_mouse.29_so_that_it_can_be_copied_to_the_clipboard

 

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>

• 然後在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} 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>'
);

 譯者注:緊跟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}" 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':''}