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

【问题标题】：How to change data in combo based on other data selected in extjs 4如何根据 extjs 4 中选择的其他数据更改组合中的数据
【发布时间】：2012-05-10 18:44:56
【问题描述】：

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

我正在使用用于 extjs 的 MVC 架构和一个返回 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();
},

但是，当我运行此代码时，第二个存储中的数据在后台发生了变化，但加载掩码继续出现在前面，因此我无法选择任何值。

我应该如何解决条件数据加载问题？任何帮助将不胜感激。

【问题讨论】：

标签： dynamic extjs load store reload

【解决方案1】：

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

【讨论】：

感谢阿伦的回答。 store.clearValue() 不是一种方法，但是我尝试了 store.removeAll() 但它没有帮助。在调试时使用萤火虫，我注意到当我在国家组合中进行第一次选择并按下状态触发器时，会触发一个请求并完美加载值。但是，当我第二次重复该过程时，不会触发新请求，但是状态中的数据会发生变化，并且会出现“正在加载”掩码。这意味着什么？
我的坏。 store.clearValue() 不是方法，但是 componentReference.clearValue() 存在。我试过了，但即使这样也无济于事。
我尝试复制此内容，但在使用新数据重新加载商店时没有任何问题。
我缩小了我的应用程序以创建一个重现此内容的新文件夹，但是，我仍然遇到此问题。我确信我在某个地方犯了一个错误。您能否分享一个突出显示我的错误的代码片段。我使用本地数据存储重现了这个场景，消除了对 java 数据的需求。
您是否有指向您托管此文件夹的位置的链接？我可以看看。

【解决方案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(); 
},

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

【讨论】：

Hey Merc，.expand() 可以作为一种快速修复...您找到永久修复了吗？

【解决方案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();
        }
    }

}

【讨论】：