使ExtJS 4網格內容可選

ExtJS 4（Sencha）中的網格不允許默認選擇內容。但我想讓這成爲可能。使ExtJS 4網格內容可選

我已經試過此網格配置：

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

我知道，你可以覆蓋電網在Ext 3中的排模板如下，但我不知道如何在Ext 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非常感謝。

來源

2011-09-01 keeny

您可以添加像這樣，通過渲染器列

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

來源

2011-09-02 08:12:49 nscrob

真棒，謝謝選擇。雖然我懷疑，這是一個跡象，我試圖使用網格的東西，它不是爲了 - 我使用純粹的網格顯示目的，並沒有使用它的任何編輯功能。我最終只是使用了一個帶有XTemplate的面板，該面板渲染出了一張平面簡潔的表格。 – keeny

@keeny我知道這是非常古老的，但我經常使用網格顯示功能。他們非常適合排序和風格 – WattsInABox

另一種方式做到這一點可能是在使用新templatecolumn到類分配給任意的HTML元素。以下是我剛寫入的同時將應用程序移植到extjs4的列定義中的單個列。

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

來源

2012-03-16 21:04:35 Aron

您可以添加enableTextSelection：忠於你viewConfig或全局應用的變化與此每格：

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

來源

2012-08-10 11:25:35 Triqui

我相信「enableTextSelection」僅在4.1.0以後纔可用。真的不知道情況是否如此，但如果是這樣，這是一條路。 –

我只是想增加Triquis回答：隨着ExtJS的4.1.0在Ext.onReady（）函數的早期或在您的應用程序的早期某處

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

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

將此代碼：您可以啓用treepanels選擇爲好。

（對不起，我不能評論張貼到Triqui的答案，因爲我沒有必要的聲譽呢。）

來源

2013-10-02 13:40:38 Manveru

對於舊版本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>' 
     ) 
     } 
    }, 
});

來源

2013-10-16 17:46:39

結合幾個這些答案中最Exty方式....創建網格時，網格的視圖設置enableTextSelection爲true。

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

來源

2014-03-31 22:51:35

您可以啓用與這些代碼幾行網格視圖，它的工作原理相當不錯，在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>' 
);

來源

2016-02-08 12:05:10 frank

使ExtJS 4網格內容可選

回答

相關問題