访问 Ext.grid.Panel 列上的下层数据行 组合框选择

Question

我有一个Ext.grid.Panel，它显示了几列。一个是具有一组静态预定义可选值的组合框。

在某些数据条目(列(上，我想禁用组合框。禁用取决于另一个列值。

我该怎么做？

更多背景：

在组合框中呈现列的单元格数据后，我无法在渲染后侦听器中反向引用列的数据模型。

如果我能够重新引用数据对象，那么我可以决定是否允许从组合框中进行选择。某些列(数据元组(允许从组合框中选择不同的值，而其他列则不允许。

背景：

面板的单元格编辑处于打开状态。我有一列是一个下拉列表，其中包含从收到的数据中获取的确定值。

我能够使用 afterrender 方法引用的存储不是保存所有表数据的存储。它只保存列的静态大-中-低数据。但是我需要行的存储;或者更好的是存储在更全局存储中的正确数据行。

Ext.define( 'MyTable',{
extend: 'Ext.grid.Panel',
xtype:'myXtypeName',
mixins: {
field: 'Ext.form.field.Field'
},
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 1} )
],
store: Ext.create( 'Ext.data.Store', {
data: [],
autoLoad: false,
} ),

columns: [
{
header: '#',
dataIndex: 'id',
},
{
header: 'Severity',
dataIndex:'correctionSeverity',
sortable: false,
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
var myTable = Ext.ComponentQuery.query('myXtypeName');
myTable[0].severityChangeable[ record.id ] = record.data.correctionType == 'Changed';
return value;
},
editor: Ext.create( 'Ext.form.field.ComboBox', {
queryMode: 'remote',
store: Ext.create( 'Ext.data.Store', {
fields: ['id', 'text'],
data: [ { id:'entry0', text:'Big' },
{ id:'entry1', text:'Medium' },
{ id:'entry2', text:'Low' } ],
} ),
valueField: 'id',
displayField: 'text',
editable: false,
forceSelection: true,
listeners: {
afterrender: function(combo, eOpts) {
// how to access the underlaying entry (row data) instead of just the column?
// by another value of the
var rowData = ???;
if ( rowData['preventColumnDropdown'] == true ) {
combo.disable();
}
},
change: function(combo, newValue, oldValue, eOpts) {
// do something
},
}
}),
}
],
initComponent: function() {
this.callParent(arguments);
this.initField();
},
setValue: function(value) {
this.store.loadData( value );
},
});

我希望我的观点和问题是可以理解的。如果不是这样，请告诉我...

我正在运行 ExtJS 6.0.0 经典版。

Answer 1

afterrender 事件是使用的错误事件，因为对所有行都重复使用同一个组合框实例。因此，在组合框实例化时，行数据不可用。

您可能希望在CellEditing插件上使用beforeedit事件在开始单元格编辑之前修改编辑器：

Ext.create('Ext.grid.plugin.CellEditing', { 
clicksToEdit: 1,
listeners: {
beforeedit: function(editor, context, eOpts) {
// Only if the combo column is being edited:
if(context.column.dataIndex == "myComboDataIndex") {
// Disable combobox depending on:
editor.setDisabled(!context.record.get("AllowComboDataEdit"));
// or just return false to stop edit altogether:
// return context.record.get("AllowComboDataEdit");
}
}
} 
});