ExtJs Grid 中动态更改属性字段

Question

我正在使用带有复选框和组合框的网格。 现在我正在尝试找到一种方法，如果在 roweditor 中选中了复选框，则可以使组合框多选。

            var pEditing =
            Ext.create('Ext.grid.plugin.RowEditing',
                    {
                        clicksToMoveEditor: 2,
                        errorSummary: false,
                        autoCancel: false,
                        listeners:
                        {
                            change: function (newValue, oldValue, eOpts)
                            {
                                if (newValue.value == true)
                                {
                                    this.down().down('grid').queryById('comboboxColumn').multiSelect = true;
                                }
                                else
                                {
                                    this.down().down('grid').queryById('comboboxColumn').multiSelect = false;
                                }
                                console.log("Checkbox Change Debug");
                             }
                        }
                   });

网格创建代码：

                                            {
                                                renderer: renderCheckbox,
                                                itemId: 'checkboxColumn',
                                                header: 'Checkbox',
                                                width: 100,
                                                sortable: false,
                                                dataIndex: 'ddCheckbox',
                                                editor: {
                                                    xtype: 'checkbox',
                                                    cls: 'x-grid-checkheader-editor',
                                                    listeners:{
                                                        change: function (newValue, oldValue, eOpts) {
                                                            pEditing.fireEvent('change',newValue, oldValue, eOpts);
                                                        }
                                                    },   
                                                },

                                            },
                                            {
                                                header: 'Speed',
                                                dataIndex: 'ddSpeed',
                                                itemId: 'comboBoxColumn',
                                                width: 125,
                                                editor:
                                                        {
                                                            xtype: 'combo',
                                                            editable: false,
                                                            multiSelect: false,
                                                            store:
                                                                    [
                                                                        ['1', '1'],
                                                                        ['2', '2'],
                                                                        ['3', '3'],
                                                                        ['4', '4'],
                                                                        ['5', '5']

                                                                    ]
                                                        }
                                            }

现在事件正在触发，我可以看到打印到日志中的调试消息。 但是，多选属性在事件触发后不会持续存在。 有没有什么简单的方法可以更改行中此组合框的属性？ 例如，如果网格中有3行，第一行可以勾选复选框，选择多个值，而第二行不勾选复选框，只能选择一个？ 我知道我可以找到在更改功能中使用的复选框的索引。

this.down().down('grid').getSelectionModel().getSelection()[0].getData()

谢谢

Answer 1

“multiselect”属性不会持续存在，因为直到组合框控件还没有到达您的以下代码。

 this.down().down('grid').queryById('comboboxColumn').multiSelect = true;

根据您的代码，组合框控件位于“comboBoxColumn”项下。 因此，为组合框指定“itemID”，例如

 xtype: 'combo', editable: false, multiSelect: false, itemId: 'comboBoxItems', store:[....]

然后，尝试下面的代码

 this.down().down('grid').queryById('comboboxColumn').queryById('comboBoxItems').multiSelect = true;

Answer 2

当您使用RowEditing插件时

在值更改事件的复选框中，您将获得 4 个参数change:function(field, newValue, oldValue, eOpts)

1）使用field参数，您将获得您选择的行（ roweditor ），就像这个field.up() 。

2）使用此roweditor您可以使用roweditor.down()方法并获得您的combo 。

3）在获取您的组件（ combo ）并使用第二个参数newValue您可以像combo.multiSelect = newValue一样设置 multiSelect

这是我创建了一个sencha fiddle演示。

希望这将帮助您实现您的解决方案或要求

Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore',
    fields: ['name', 'email', 'phone'],
    data: [{
        name: 'Lisa',
        email: 'lisa@simpsons.com',
        phone: '555-111-1224'
    }, {
        name: 'Bart',
        email: 'bart@simpsons.com',
        phone: '555-222-1234'
    }, {
        name: 'Homer',
        email: 'homer@simpsons.com',
        phone: '555-222-1244'
    }, {
        name: 'Marge',
        email: 'marge@simpsons.com',
        phone: '555-222-1254'
    }]
});

// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data: [{
        "abbr": "AL",
        "name": "Alabama"
    }, {
        "abbr": "AK",
        "name": "Alaska"
    }, {
        "abbr": "AZ",
        "name": "Arizona"
    }]
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [{
        header: 'Name',
        dataIndex: 'name',
        editor: 'textfield'
    }, {
        header: 'Email',
        dataIndex: 'email',
        flex: 1,
        editor: {
            xtype: 'combobox',
            allowBlank: false
        }
    }, {
        header: 'Multiple',
        dataIndex: 'multiple',
        sortable:false,
        menuDisabled:true,
        flex: 0.5,
        editor: {
            xtype: 'checkboxfield',
           // checked:true,
            listeners: {
                change: function (field, newValue) {
                    var combo = field.up().down('#state');
                    combo.reset();
                    combo.multiSelect = newValue
                }
            }
        }
    }, {
        header: 'States',
        dataIndex: 'states',
        flex: 1,
        editor: {
            xtype: 'combo',
            store: states,
            itemId: 'state',
            queryMode: 'local',
            displayField: 'name',
            multiSelect:true,
            valueField: 'abbr',
            filterPickList: false,
            listeners:{
                afterrender:function(){
                    this.multiSelect=false;
                }
            }
        }
    }],
    selModel: 'rowmodel',
    plugins: {
        ptype: 'rowediting',
        clicksToEdit:1
    },
    height: 200,
    width: '100%',
    renderTo: Ext.getBody()
});