如何在Ext.Grid.panel中结合两个组合

Question

我在Extjs 6.5中有一个带有更多组合的网格面板。当我从第一列中的组合中选择一个值时，我想设置，假设隐藏或禁用的属性，用于最后一列和同一行中的组合。我尝试过，但它适用于上一列中的所有组合，而不仅仅是从同一行中组合。这是小提琴。谢谢！

Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        viewModel: {
            data: {
                index1: ''
            }  
        },
        columns: [
            {
            header: 'Hungry1',
            dataIndex: 'h1',
            flex: 1,
            renderer: function(v) {
                var iconCls = Ext.getStore('hungryStore').findRecord('value', v).get('iconCls');
                return '<div class="x-fa ' + iconCls + '"></div>';
            },
            editor: {
                xtype: 'combo',
                editable: false,
                fieldStyle: 'font-family: FontAwesome;',
                tpl: [
                    '<tpl for=".">',
                    '<div class="x-boundlist-item x-fa {iconCls}"></div>',
                    '</tpl>'
                ],
                queryMode: 'local',
                store: Ext.data.StoreManager.lookup('hungryStore'),
                valueField: 'value',
                displayField: 'glyph',
                listeners:{
                    select: function(combo, record){
                        combo.up('gridpanel').viewModel.data.index1 = combo.up().grid.selModel.selection.rowIdx;
                        // here I want to get combo from last column and same row index and set it hidden
                    }
                }
            }
        }, {
            header: 'Hungry',
            dataIndex: 'hungry',
            flex: 1,
            renderer: function(v) {
                var iconCls = Ext.getStore('hungryStore').findRecord('value', v).get('iconCls');
                return '<div class="x-fa ' + iconCls + '"></div>';
            },
            editor: {
                xtype: 'combo',
                editable: false,
                fieldStyle: 'font-family: FontAwesome;',
                tpl: [
                    '<tpl for=".">',
                    '<div class="x-boundlist-item x-fa {iconCls}"></div>',
                    '</tpl>'
                ],
                queryMode: 'local',
                store: Ext.data.StoreManager.lookup('hungryStore'),
                valueField: 'value',
                displayField: 'glyph',
                //hidden: '{isHidden}'
            },
        }
        ],
        selModel: 'cellmodel',
        plugins: {
            ptype: 'cellediting',
            clicksToEdit: 1
        },
        height: 400,
        width: 600,
        renderTo: Ext.getBody()
    });

Answer 1

您需要使用beforeedit插件的CC_1事件。

在此小提琴中，我使用您的代码创建了一个演示并进行了一些更改。我希望这将有助于/指导您达到要求。

代码段

Ext.application({
    name: 'Fiddle',
    launch: function () {
        Ext.create('Ext.data.Store', {
            storeId: 'hungryStore',
            fields: ['state', 'value', 'iconCls'],
            data: [{
                state: 'Yes',
                value: 0,
                iconCls: 'fa-battery-empty',
                glyph: "uf244"
            }, {
                state: 'Maybe',
                value: 50,
                iconCls: 'fa-battery-half',
                glyph: "uf242"
            }, {
                state: 'No',
                value: 100,
                iconCls: 'fa-battery-full',
                glyph: "uf240"
            }]
        });
        Ext.create('Ext.data.Store', {
            storeId: 'test',
            fields: ['state', 'value'],
            data: [{
                state: 'Yes',
                value: 0
            }, {
                state: 'Maybe',
                value: 50
            }, {
                state: 'No',
                value: 100
            }]
        });
        Ext.create('Ext.data.Store', {
            storeId: 'simpsonsStore',
            fields: ['name', 'email', 'phone'],
            data: [{
                name: 'Lisa',
                email: '[e-mail]',
                phone: '555-111-1224',
                hungry: 0,
                h1: 0
            }, {
                name: 'Bart',
                email: '[e-mail]',
                phone: '555-222-1234',
                hungry: 50,
                h1: 50
            }, {
                name: 'Homer',
                email: '[e-mail]',
                phone: '555-222-1244',
                hungry: 100,
                h1: 100
            }, {
                name: 'Marge',
                email: '[e-mail]',
                phone: '555-222-1254',
                hungry: 50,
                h1: 50
            }]
        });
        Ext.create('Ext.grid.Panel', {
            title: 'Simpsons',
            store: Ext.data.StoreManager.lookup('simpsonsStore'),
            columns: [{
                    header: 'Hungry1',
                    dataIndex: 'h1',
                    flex: 1,
                    renderer: function (v) {
                        var iconCls = Ext.getStore('hungryStore').findRecord('value', v).get('iconCls');
                        return '<div class="x-fa ' + iconCls + '"></div>';
                    },
                    editor: {
                        xtype: 'combo',
                        editable: false,
                        fieldStyle: 'font-family: FontAwesome;',
                        tpl: [
                            '<tpl for=".">',
                            '<div class="x-boundlist-item x-fa {iconCls}"></div>',
                            '</tpl>'
                        ],
                        queryMode: 'local',
                        store: Ext.data.StoreManager.lookup('hungryStore'),
                        valueField: 'value',
                        displayField: 'glyph'
                    }
                }, {
                    header: 'Name',
                    dataIndex: 'name',
                    editor: 'textfield'
                }, {
                    header: 'Email',
                    dataIndex: 'email',
                    flex: 1,
                }, {
                    header: 'Phone',
                    dataIndex: 'phone'
                }, {
                    header: 'Hungry',
                    dataIndex: 'hungry',
                    flex: 1,
                    renderer: function (v) {
                        var iconCls = Ext.getStore('hungryStore').findRecord('value', v).get('iconCls');
                        return '<div class="x-fa ' + iconCls + '"></div>';
                    },
                    editor: {
                        xtype: 'combo',
                        editable: false,
                        fieldStyle: 'font-family: FontAwesome;',
                        tpl: [
                            '<tpl for=".">',
                            '<div class="x-boundlist-item x-fa {iconCls}"></div>',
                            '</tpl>'
                        ],
                        queryMode: 'local',
                        store: Ext.data.StoreManager.lookup('hungryStore'),
                        valueField: 'value',
                        displayField: 'glyph'
                    },
                }
            ],
            selModel: 'cellmodel',
            plugins: {
                ptype: 'cellediting',
                clicksToEdit: 1,
                listeners: {
                    beforeedit: function (editor, context, eOpts) {
                        if (context.column.dataIndex == "hungry") {
                            Ext.defer(function () {
                                Ext.getCmp(context.cell.querySelector('.x-field').id).setDisabled(context.record.get('h1') == 50);
                            }, 25);
                        }
                    }
                }
            },
            renderTo: Ext.getBody()
        });
    }
});