Question

我正在使用extjs 4.0.7。我有一个要求，其中我在网格的编辑模式中有两个组合框，我需要根据第一个中选择的值更改第二个中的数据。

我正在使用MVC架构的extjs和一个返回json字符串的java代码来填充组合框中的数据。我的第一个组合框的代码是：

查看文件：

items: [{
            id: 'country',
            header: 'Countries',
            field: {
                xtype: 'combo',
                store: [
                    ["USA","USA"],
                    ["India","India"],
                ],
                editable: false,
                allowBlank: false,
                listeners: {
                    select: function(combo, records, eOpts){
                        contactTypeGrid = combo.getValue();
                        myGrid.fireEvent('LoadStateOnSelect');
                    }
                }
            }
        },
        {
            id: 'states',
            header: 'Sates',
            dataIndex: 'states',
            field: {
                xtype: 'combo',
                store: 'StateStore',
                valueField: 'stateDesc',
                displayField: 'stateText',
            }
        },  ....
    ]

控制器：

LoadStateOnSelect: function(){
    contactTypeGrid = contactTypeGrid.toLowerCase();
    var stateStore = this.getStateStoreStore();
    stateStore.getProxy().url = "myURL.do";
    stateStore.getProxy().extraParams.act = contactTypeGrid;
    stateStore.load();
},

但是，当我运行此代码时，第二个存储中的数据会在后台更改，但前面会出现一个Loading mask，因为我无法选择任何值。

如何解决连续数据加载问题？任何帮助将不胜感激。

Answer 1

在重新加载商店之前，您是否尝试清除组合框中的选定值？您可以尝试在组合上调用clearValue()方法。

Answer 2

我暂时解决了这个问题。但是，我仍然在寻找一种更稳定可行的解决方案。

解决方案：每当更改从属存储中的数据时，您都可以展开正确加载新数据的组合框。

LoadStateOnSelect: function(){
    contactTypeGrid = contactTypeGrid.toLowerCase();
    var stateStore = this.getStateStoreStore();
    stateStore.getProxy().url = "myURL.do";
    stateStore.getProxy().extraParams.act = contactTypeGrid;
    statesCombo.expand(); //Here I am assuming that "statesCombo" has a 
                         //reference to the dependant combo box.
    stateStore.load(); 
},

这可能会节省别人的时间，但如果有人找到更可行的解决方案，请告诉我。

Answer 3

carStore - 主要组合的任何商店
carModelStore - 存储，其内容应取决于carStore中的选择

当数据来自服务器时，请考虑更一般和有用的示例。

var carModelStore = new Ext.data.Store({
    reader: new Ext.data.JsonReader({
        fields: ['id', 'car-model'],
        root: 'rows'
    }),
    storeId: 'car-model-store',
    proxy: new Ext.data.HttpProxy({
        url: 'carmodeldataprovider.json?car-name=lamborghini'
    }),
    autoLoad: true
});


{ xtype: 'combo', name: 'car-name', fieldLabel: 'Car', mode: 'local', store: carStore, triggerAction: 'all',
    listeners: {
        select: function(combo, records, eOpts){
            var carName = records.get('car-name');
            var carModelStore = Ext.StoreMgr.lookup("car-model-store");

            carModelStore.proxy.setUrl('carmodeldataprovider.json?car-name=' + carName, false);
            carModelStore.reload();
        }
    }

}

如何根据extjs 4中选择的其他数据更改组合中的数据

3 个答案: