ExtJS如何在网格面板中构建链接组合框答案

【问题标题】：ExtJS how to build linkage comboboxes in Grid panelExtJS如何在网格面板中构建链接组合框
【发布时间】：2015-09-14 12:04:34
【问题描述】：

我是 ExtJS 的新手，我正在制作一个地址簿，管理员可以在其中通过从两个组合框中选择列出的州和城市来编辑用户的地址。

我需要在网格面板中建立一些链接组合框，以便管理员在第一个下拉列表中选择一个状态后，相关城市将自动列在第二个下拉列表中。

如果它只是一个简单的面板，我可以在选择状态后使用以下代码更新 cityStore：

        {                               
            xtype:"combo",                                                                                   
            name:'state',  
            id:'state',  
            displayField:'name',  
            valueField:'id',  
            store:storeState,  
            triggerAction:'all',  
            queryMode:'local',  
            selecOnFocus:true,  
            forceSelection:true,  
            allowBlank:false,  
            editable:true,
            //using select listener for updating city store  
            listeners:{  
                select:function(combo,record,index){  
                    try{  
                        var city = Ext.getCmp('city');  
                        city.clearValue();  
                        city.store.load(  
                             {  
                                 params:{  
                                     paramId:combo.getValue()  
                                 }  
                             }     
                        );  
                    }catch(ex){  
                        alert("Failed to load data");  
                    }  

                }  
                }  

        },

但是在 GridPanel 中，如果我用同样的方式更新 cityStore，整个列都会改变。无论如何只能解决网格面板中同一行中的列吗？谢谢！

【问题讨论】：

所以你想如果你在第一行选择一个州，现在如果你在同一行编辑城市，只有那些城市应该出现在第一行的选定状态中
是的，你有什么想法吗？

标签： javascript extjs combobox extjs4

【解决方案1】：

您需要使用网格的validateedit & beforeedit 事件来更新城市商店。

listeners: {
        validateedit: {  // to check if state value is changed & clearing city value
                fn: function(event,editor){ 
                    switch (editor.field) {
            case 'state':
                 if(editor.value!=editor.record.getData().state)
                     editor.record.set('city',null);
                break;
             }
        return true;
        }
        },
        beforeedit: { // to update the city store based the state value of corresponding row
                fn: function(event,editor){                   

        switch (editor.field) {
            case 'city':
                  var cityStore = Ext.data.StoreManager.lookup('cityStore');
                 cityStore.load({  
                                  params:{  
                                         paramId:editor.value 
                                         }  
                                   });  
                 break;
                }
         return true;
         }
        }
       }

Here 是一个工作示例，我正在使用州和城市的两家本地商店。每当使用同一行中给出的状态值编辑城市商店时过滤城市商店。有三个州 A、B、C，分别有 1-5、6-10 和 11-15 个城市。

【讨论】：

【解决方案2】：

每次用户点击城市编辑器时，您只需要使用来自 State 的参数重新加载 Cities 商店。在组合框中的 beforequery 事件中执行此操作。

{
    //this is your Cities combo
    xtype: 'combo',
    valueField: 'foo',
    displayField: 'bar',
    queryMode: 'remote',
    queryCaching: false, //don't forget to disable query caching        
    bind: {
        store: '{cities}',   
    },
    listeners: {
        beforequery: function(queryPlan) {
            //get param from your States store
            queryPlan.combo.getStore();
            //then load this store
        }
    }
}

【讨论】：