Javascript 使 ExtJS 4 网格内容可选
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7277752/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making ExtJS 4 grid content selectable
提问by Barry
Grids in ExtJS 4 (Sencha) don't allow to select content by default. But I want to make this possible.
ExtJS 4 (Sencha) 中的网格默认不允许选择内容。但我想让这成为可能。
I've tried this grid config:
我试过这个网格配置：
viewConfig: {
disableSelection: true,
stripeRows: false,
getRowClass: function(record, rowIndex, rowParams, store){
return "x-selectable";
}
},
with these css classes (basically targeting every element I can see in Chrome):
使用这些 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;
}
I know that you can override the grid row template in Ext 3 as below, but I don't know how to do the same in Ext 4:
我知道你可以在 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>'
)
}
Any suggestions much appreciated.
任何建议非常感谢。
采纳答案by nscrob
You can add it like this, using renderer for the column
您可以像这样添加它，对列使用渲染器
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>')
}
回答by Triqui
You can add enableTextSelection: true to your viewConfig or apply the change globally for every grid with this:
您可以将 enableTextSelection: true 添加到您的 viewConfig 或通过以下方式为每个网格全局应用更改：
Ext.override(Ext.grid.View, { enableTextSelection: true });
回答by ben.rally
Combining several of these answers in the most Exty way.... Set enableTextSelection to true in the grid's view when creating the grid.
以最 Exty 的方式组合这些答案中的几个......创建网格时，在网格的视图中将 enableTextSelection 设置为 true。
var grid = new Ext.grid.GridPanel({
viewConfig: {
enableTextSelection: true
},
});
回答by Manveru
I just would like to add to Triquis answer: With ExtJS 4.1.0 you can enable the selection for treepanels as well:
我只想添加到 Triquis 答案：使用 ExtJS 4.1.0，您还可以启用树面板的选择：
Ext.override(Ext.view.Table, { enableTextSelection: true }); // Treepanels
Ext.override(Ext.grid.View, { enableTextSelection: true }); // Grids
Place this code somewhere early in your Ext.onReady() function or early in your application.
将此代码放置在 Ext.onReady() 函数的早期或应用程序的早期。
(Sorry, I am not able to post a comment to the answer of Triqui as I don't have the required reputation yet.)
（抱歉，我无法对 Triqui 的回答发表评论，因为我还没有所需的声誉。）
回答by Sabir Patel
For older version of EXTJS that doesnot support enable text selection. Following will work by assigning a new template to the grid cell. This works for EXTJS 3.4.0
对于不支持启用文本选择的旧版本 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>'
)
}
},
});
回答by Aron
An alternate way to do it might be to assign the classes to arbitrary html elements while using the new templatecolumn. Here's a single column in a column definition I just wrote while porting an app to extjs4.
另一种方法可能是在使用新的templatecolumn. 这是我刚刚在将应用程序移植到 extjs4 时编写的列定义中的单个列。
{
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'}
}
回答by frank
you can enable the selection for grid view with those few lines of code , it works very well in EXTJS 3.4 , with IE 11 and compatibility mode
您可以使用这几行代码启用网格视图的选择，它在 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>'
);
回答by Ravi Kumar
Value true is not working, Please use as following :
值 true 不起作用，请按以下方式使用：
userSelectable: { bodyElement: 'text' },
userSelectable: { bodyElement: 'text' },
