Javascript Ext-JS：如何禁用网格中单个单元格的单元格编辑？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6913467/
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
Ext-JS: How to disable cell editing for individual cells in a grid?
提问by zw324
I am now building a web application with Ext-JS 4.0.2, and I am using a editable grid to control the data to be shown for a table on the same page.
我现在正在使用 Ext-JS 4.0.2 构建一个 Web 应用程序，并且我正在使用可编辑的网格来控制要在同一页面上为表格显示的数据。
To make the grid editable, I followed the API documentation and used the following:
为了使网格可编辑，我遵循了 API 文档并使用了以下内容：
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 2
})
]
However, for this grid, there are several cells that are not supposed to be changed.
但是，对于此网格，有几个单元格不应更改。
I could simply let the event handler change the data back to the right state once it is changed in the grid, but this seems to be hacky, hard to maintain, and unreadable. Is there any better way to do this? I read the API but cannot find any useful attributes.
我可以简单地让事件处理程序在网格中更改数据后将数据更改回正确的状态，但这似乎很麻烦，难以维护且不可读。有没有更好的方法来做到这一点？我阅读了 API，但找不到任何有用的属性。
UPDATE
更新
As for this particular app, just disable the first row would work. But I am also interested in choose several grid and make them not editable (imagine a Sudoku game with a grid).
对于这个特定的应用程序，只需禁用第一行即可。但我也有兴趣选择几个网格并使它们不可编辑（想象一个带有网格的数独游戏）。
回答by Molecular Man
As I've understand from comments you want to make first row not editable. There is ugly but quick solution. Assign to your plugin beforeedithandler. And when event is being fired check what row is being edited. If first - return false:
正如我从评论中了解到的，您想让第一行不可编辑。有丑陋但快速的解决方案。分配给您的插件beforeedit处理程序。当事件被触发时，检查正在编辑的行。如果第一个 - return false：
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 2,
listeners: {
beforeedit: function(e, editor){
if (e.rowIdx == 0)
return false;
}
}
})
]
Check out docsfor beforeedit.
检查出的文档进行beforeedit。
UPDATE
更新
Docs say that beforeedithas such set of params:
文档说beforeedit有这样一组参数：
beforeedit( Ext.grid.plugin.Editing editor, Object e, Object options )
But there is mistake. The correct sequance is:
但是有错误。正确的顺序是：
beforeedit( Object e, Ext.grid.plugin.Editing editor, Object options )
I've updated example due to this fact.
由于这个事实，我已经更新了示例。
回答by Xupypr MV
You can specify ColumnModel to declare editable and not editable columns:
您可以指定 ColumnModel 来声明可编辑和不可编辑的列：
var cm = new Ext.grid.ColumnModel({
columns: [{
dataIndex: 'id',
header: 'id',
hidden: true
},{
dataIndex: '1',
header: '1',
editor: new Ext.form.TextField({})
},{
dataIndex: '2',
header: '2',
editor: new Ext.form.NumberField({})
},{
dataIndex: '3',
header: '3'
}]
});
var grid = new Ext.grid.EditorGridPanel({
store: store,
clicksToEdit: 2,
cm: cm
...
In this example column idis unvisible, columns 1 and 2 editable (with text and number editors) and column 3 is not editable.
在此示例中，列id不可见，第 1 列和第 2 列可编辑（使用文本和数字编辑器），第 3 列不可编辑。
UPDATE:
更新：
Prevent row editing:
防止行编辑：
grid.on('beforeedit', function(event) {
if (event.row == 0) {
this.store.rejectChanges();
event.cancel = true;
}
}, grid);
回答by Bill Sontag
As Ziyao Wei mentioned the documentation for the beforeEdit event is wrong. However you need to reference the 'editor' parameter to get the row index and other values, not the first object parameter 'e'. Updated example:
正如 Ziyao Wei 提到的 beforeEdit 事件的文档是错误的。但是，您需要引用“editor”参数来获取行索引和其他值，而不是第一个对象参数“e”。更新示例：
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 2,
listeners: {
beforeedit: function(e, editor){
if (editor.rowIdx == 0)
return false;
}
}
})
]
