Extjs 如何在Ext.grid.Panel中绑定两个组合框？_Extjs_Bind

Extjs 如何在Ext.grid.Panel中绑定两个组合框？

extjs

Extjs 如何在Ext.grid.Panel中绑定两个组合框？,extjs,bind,Extjs,Bind,我在ExtJS 6.5中有一个网格面板，其中包含更多combo。当我从第一列中的组合中选择一个值时，我想为最后一列和同一行中的组合设置，比如说hidden或disabled属性。我试过了，但它适用于最后一列的所有combo，而不仅仅适用于同一行的combo。是小提琴。谢谢 Ext.create('Ext.grid.Panel', { title: 'Simpsons', store: Ext.data.StoreManager.lookup('simpsonsSt

我在ExtJS 6.5中有一个网格面板，其中包含更多combo。当我从第一列中的组合中选择一个值时，我想为最后一列和同一行中的组合设置，比如说hidden或disabled属性。我试过了，但它适用于最后一列的所有combo，而不仅仅适用于同一行的combo。是小提琴。谢谢

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

Ext.create（'Ext.grid.Panel'{
标题：《辛普森一家》，
存储：Ext.data.StoreManager.lookup（'SimpsonStore'），
视图模型：{
数据：{
索引1:“”
}  
},
栏目：[
{
标题：“饥饿1”，
数据索引：“h1”，
弹性：1，
渲染器：函数（v）{
var iconCls=Ext.getStore（'hungryStore'）.findRecord（'value'，v）.get（'iconCls'）；
返回“”；
},
编辑:{
xtype:'组合'，
可编辑：false，
fieldStyle:“字体系列：FontAwesome；”，
第三方物流：[
'',
'',
''
],
queryMode:'本地'，
存储：Ext.data.StoreManager.lookup（'hungryStore'），
valueField:'值'，
显示字段：“glyph”，
听众：{
选择：函数（组合、记录）{
combo.up（'gridpanel'）.viewModel.data.index1=combo.up（）.grid.selModel.selection.rowIdx；
//在这里，我想从最后一列和同一行索引中获取combo，并将其设置为隐藏
}
}
}
}, {
标题：“饥饿”，
数据索引：“饥饿”，
弹性：1，
渲染器：函数（v）{
var iconCls=Ext.getStore（'hungryStore'）.findRecord（'value'，v）.get（'iconCls'）；
返回“”；
},
编辑:{
xtype:'组合'，
可编辑：false，
fieldStyle:“字体系列：FontAwesome；”，
第三方物流：[
'',
'',
''
],
queryMode:'本地'，
存储：Ext.data.StoreManager.lookup（'hungryStore'），
valueField:'值'，
显示字段：“glyph”，
//隐藏：“{isHidden}”
},
}
],
selModel:'cellmodel'，
插件：{
p类型：'cellediting'，
单击编辑：1
},
身高：400，
宽度：600，
renderTo:Ext.getBody（）
});

您需要使用插件事件

在此中，我使用您的代码创建了一个演示，并做了一些更改。我希望这将有助于/指导您实现您的要求

代码片段

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: 'lisa@simpsons.com',
                phone: '555-111-1224',
                hungry: 0,
                h1: 0

            }, {
                name: 'Bart',
                email: 'bart@simpsons.com',
                phone: '555-222-1234',
                hungry: 50,
                h1: 50
            }, {
                name: 'Homer',
                email: 'homer@simpsons.com',
                phone: '555-222-1244',
                hungry: 100,
                h1: 100
            }, {
                name: 'Marge',
                email: 'marge@simpsons.com',
                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()
        });
    }
});

Ext.application({
名字：“小提琴”，
启动：函数（）{
Ext.create（'Ext.data.Store'{
storeId:“hungryStore”，
字段：['state'，'value'，'iconCls']，
数据：[{
声明：“是”，
值：0，
iconCls:“fa电池电量不足”，
图示符：“\uf244”
}, {
声明：“可能”，
价值：50，
iconCls:‘fa半电池’，
图示符：“\uf242”
}, {
声明：‘否’，
数值：100，
iconCls:“fa电池已满”，
图示符：“\uf240”
}]
});
Ext.create（'Ext.data.Store'{
storeId:'测试'，
字段：[“状态”，“值”]，
数据：[{
声明：“是”，
数值：0
}, {
声明：“可能”，
价值：50
}, {
声明：‘否’，
数值：100
}]
});
Ext.create（'Ext.data.Store'{
storeId:“辛普森商店”，
字段：[“姓名”、“电子邮件”、“电话”]，
数据：[{
名字：'丽莎'，
电邮:'lisa@simpsons.com',
电话：555-111-1224，
饥饿:0,，
h1:0
}, {
姓名：'巴特'，
电邮:'bart@simpsons.com',
电话：555-222-1234，
饥饿：50，
h1:50
}, {
名字：“荷马”，
电邮:'homer@simpsons.com',
电话：555-222-1244，
饥饿：100，
h1:100
}, {
姓名：'Marge'，
电邮:'marge@simpsons.com',
电话：555-222-1254，
饥饿：50，
h1:50
}]
});
Ext.create（'Ext.grid.Panel'{
标题：《辛普森一家》，
存储：Ext.data.StoreManager.lookup（'SimpsonStore'），
栏目：[{
标题：“饥饿1”，
数据索引：“h1”，
弹性：1，
渲染器：函数（v）{
var iconCls=Ext.getStore（'hungryStore'）.findRecord（'value'，v）.get（'iconCls'）；
返回“”；
},
编辑:{
xtype:'组合'，
可编辑：false，
fieldStyle:“字体系列：FontAwesome；”，
第三方物流：[
'',
'',
''
],
queryMode:'本地'，
存储：Ext.data.StoreManager.lookup（'hungryStore'），
valueField:'值'，
显示字段：“glyph”
}
}, {
标题：“名称”，
数据索引：“名称”，
编辑：“文本字段”