web-dev-qa-db-ja.com

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

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

私はこのグリッド構成を試しました：

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

これらのcssクラスを使用すると（基本的にChromeで表示できるすべての要素を対象とします）：

/* 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;
}

以下のようにExt3でグリッド行テンプレートをオーバーライドできることは知っていますが、Ext4で同じことを行う方法がわかりません。

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

どんな提案も大歓迎です。

javascriptextjs4extjs
26
Barry

列にレンダラーを使用して、このように追加できます

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

EnableTextSelection：trueをviewConfigに追加するか、次のようにしてすべてのグリッドにグローバルに変更を適用できます。

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

これらの回答のいくつかを最もExtyな方法で組み合わせます。グリッドを作成するときに、グリッドのビューでenableTextSelectionをtrueに設定します。

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

Triquisの回答に追加したいと思います。ExtJS4.1.0を使用すると、ツリーパネルの選択も有効にできます。

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

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

このコードは、Ext.onReady（）関数の初期またはアプリケーションの初期のどこかに配置します。

（申し訳ありませんが、必要な評判がまだないため、Triquiの回答にコメントを投稿することはできません。）

1
Manveru

値trueは機能していません。次のように使用してください：

userSelectable：{bodyElement： 'text'}、

0
Ravi Kumar

テキスト選択の有効化をサポートしていない古いバージョンのEXTJSの場合。以下は、グリッドセルに新しいテンプレートを割り当てることで機能します。これはEXTJS 3.4.0で動作します

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

別の方法として、新しいtemplatecolumnを使用しながら、クラスを任意のhtml要素に割り当てることができます。これは、アプリをextjs4に移植するときに書いた列定義の1つの列です。

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

これらの数行のコードでグリッドビューの選択を有効にできます。これは、EXTJS 3.4で、IE 11および互換モードで非常にうまく機能します。

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