ExtJS 4グリッドコンテンツを選択可能にする

Question

ExtJS 4（Sencha）のグリッドは、デフォルトではコンテンツを選択できません。しかし、私はこれを可能にしたい。

私はこのグリッド設定しようとしました：私はあなたがグリッドをオーバーライドすることができることを知って

/* allow grid text selection in Firefox and WebKit based browsers */ 

.x-selectable, 
.x-selectable * { 
       -moz-user-select: text !important; 
       -khtml-user-select: text !important; 
    -webkit-user-select: text !important; 
} 

.x-grid-row td, 
.x-grid-summary-row td, 
.x-grid-cell-text, 
.x-grid-hd-text, 
.x-grid-hd, 
.x-grid-row, 

.x-grid-row, 
.x-grid-cell, 
.x-unselectable 
{ 
    -moz-user-select: text !important; 
    -khtml-user-select: text !important; 
    -webkit-user-select: text !important; 
} 

：（基本的に私はChromeで見ることができるすべての要素をターゲットに）これらのCSSクラスを持つ

viewConfig: { 
    disableSelection: true, 
    stripeRows: false, 
    getRowClass: function(record, rowIndex, rowParams, store){ 
     return "x-selectable"; 
    } 
}, 

を内線3の行テンプレートは以下のように、私は内線4に同じことを行う方法がわからない：

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

任意のsu ggestionsはとても感謝しています。

Answer 1

あなたは、列

columns: [ 
    { 
     header: "", 
     dataIndex: "id", 
     renderer: function (value, metaData, record, rowIndex, colIndex, store) { 
      return this.self.tpl.applyTemplate(record.data); 
     }, 
     flex: 1 
    } 
], 
statics: { 
    tpl: new Ext.XTemplate(
     '<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>') 
} 

Answer 2

それは新しいtemplatecolumnを使用している間、任意のHTML要素にクラスを割り当てることがあるかもしれない行うための別の方法のためのレンダラを使用して、このようにそれを追加することができます。 ext2s4にアプリケーションを移植しているときに書いたカラム定義の1列です。あなたのviewConfigにtrueまたはこれとすべてのグリッドに対してグローバルに変更を適用します：

は

{ 
    text: "Notes", 
    dataIndex: 'notes', 
    width: 300,  
    xtype: 'templatecolumn', 
    tpl: [ 
    '<span class="x-grid3-col x-grid3-cell x-grid3-td-{id} x-selectable {css}"', 
    'style="{style}" tabIndex="0" {cellAttr}>', 
    '<span class="x-grid3-cell-inner x-grid3-col-{id}" {attr}>{notes}', 
    '</span></span>' ], 
    editor: {xtype:'textfield'} 
} 

Answer 3

あなたはenableTextSelectionを追加することができ、私はちょうどTriquisに追加したいと思います

Ext.override(Ext.grid.View, { enableTextSelection: true }); 

Answer 4

が答える： ExtJSの4.1.0であなたにもtreepanelsのための選択を有効にすることができます。

Ext.override(Ext.view.Table, { enableTextSelection: true }); // Treepanels 

Ext.override(Ext.grid.View, { enableTextSelection: true }); // Grids 

置き、このコードをどこかに早く、あなたのExt.onReady（）関数内または早期アプリケーションインチ

（申し訳ありませんが、私はまだ必要な評判を持っていないようTriquiの答えにコメントを投稿することができません。）

Answer 5

サポートは、テキストの選択を可能にdoesnot EXTJSの古いバージョンのためには。以下は、グリッドセルに新しいテンプレートを割り当てることによって動作します。これは、グリッドを作成するときに、グリッドのビューでtrueにenableTextSelectionを設定する....ほとんどExtyな方法でこれらの答えのいくつかを組み合わせ

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

Answer 6

EXTJS 3.4.0で動作します。

var grid = new Ext.grid.GridPanel({ 
    viewConfig: { 
     enableTextSelection: true 
    }, 
}); 

Answer 7

あなたは、コードのこれらのいくつかの行とグリッドビュー、それはIE 11で、EXTJS 3.4で非常にうまく機能 と

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