How bind two combobox in Ext.grid.Panel?

Question

I have a grid panel in ExtJS 6.5 with more combo. When I select a value from a combo in the first column, I want to set, let's say hidden or disabled property, for the combo in the last column and the same row. I tried but it works for all combo from the last column not just for combo from the same row. Here is fiddle. Thanks!

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

You need to use beforeedit event of cellediting plugin.

In this FIDDLE, I have created a demo using your code and made some changes. I hope this will help/guide you to achieve your requirement.

CODE SNIPPET

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: '[email protected]',
                phone: '555-111-1224',
                hungry: 0,
                h1: 0

            }, {
                name: 'Bart',
                email: '[email protected]',
                phone: '555-222-1234',
                hungry: 50,
                h1: 50
            }, {
                name: 'Homer',
                email: '[email protected]',
                phone: '555-222-1244',
                hungry: 100,
                h1: 100
            }, {
                name: 'Marge',
                email: '[email protected]',
                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()
        });
    }
});