访问 Ext.grid.Panel 列 ComboBox 选择上的基础数据行

Question

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

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

我该怎么做？

更多背景：

在组合框中呈现列的单元格数据后，我无法在 afterrender-listener 中反向引用列的数据模型。

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

背景：

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

我可以使用 afterrender 方法引用的存储不是保存所有表数据的存储。它只保存列的静态 Big-Medium-Low 数据。但我需要行的商店；或更好地存储在更全局的存储中的正确数据行。

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