ExtJS Gridはテキストを選択してコピーします。

http://extjs.com/learn/Ext_FAQ_Grid菗How_to_select_.text_.同前the_gridu.28 with_the_mouse.29_ソ_that.it_can_becopied_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.以下はコンドルによって使用される方法である。

まず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の構成に入れる必要があります。上記のview Configではなく、
 
 
訳注:
 
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のクラスに私達のx-selectableを追加しました。
 
 
2.さらに、いくつかの列だけを選択する必要がある場合：
    2.1該当列のレンダーに、meta.selectable=trueを追加します。
    2.2エクセルのテンプレートを編集し、中で{selectable？'someCssClass'''''を判断する。