Question

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

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

我该怎么做？

更多背景资料：

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

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

背景：

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

我能够使用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 classic。

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

在Ext.grid.Panel的列ComboBox Selection

1 个答案: