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']

                                                                    ]
                                                        }
                                            }

现在事件正在启动，我可以看到打印到日志的调试消息。但是，事件触发后，multiselect属性不会持久存在。是否有任何简单的方法来改变行中这个组合框的属性？例如，如果网格中有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插件时

在checkbox值change事件中，您将获得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()
});

在ExtJs Grid中动态更改属性字段

2 个答案: