如何为ExtJS Combobox配置Store以填充JSON数据？

嘿，我来帮你搞定这个Combobox的数据源配置问题！你已经搭好了Store和Model的基础框架，只需要调整几个关键配置就能让数据正常显示在下拉框里了。

1. 给Combobox配置Store引用 #

你已经给Store设置了storeId: 'GetShopSurvey'，最直接的方式就是在Combobox的store配置项里直接引用这个storeId：

{
    xtype: 'combo',
    fieldLabel: 'Range',
    name: 'Range1',
    store: 'GetShopSurvey', // 这里直接填入Store的storeId
    displayField: 'range',
    autoSelect: true,
    forceSelection: true,
    disabled: true
}

ExtJS会自动在全局Store管理器中找到对应的Store实例，不需要额外实例化。

2. 让Store正确解析你的JSON数据 #

注意你的后端返回的是单个对象{"range": 70}，但ExtJS的JsonReader默认期望返回数组格式（比如[{"range":70}]）。如果后端没法修改返回格式，你需要调整Store的Reader配置，把单个对象转换成数组：

proxy: {
    type: 'ajax',
    url: 'http://localhost/webcontent/CShopSurveyWebApplet&SubFunc=GetShopSurvey',
    reader: {
        type: 'json',
        // 处理单个对象的情况，自动转成数组
        rootProperty: function(rawData) {
            return Ext.isArray(rawData) ? rawData : [rawData];
        }
    }
}

如果后端可以修改，建议直接返回数组格式，这样就不需要额外处理Reader了，更符合ExtJS的默认规范。

3. 确保Store自动加载数据 #

为了让Store在页面加载时自动拉取数据，你需要在Store定义里加上autoLoad: true：

Ext.define('Test.store.GetShopSurvey', {
    extend: 'Ext.data.Store',
    alias: 'store.GetShopSurvey',
    model: 'Test.model.GetShopSurvey',
    storeId: 'GetShopSurvey',
    autoLoad: true, // 新增自动加载配置
    proxy: {
        type: 'ajax',
        url: 'http://localhost/webcontent/CShopSurveyWebApplet&SubFunc=GetShopSurvey',
        reader: {
            type: 'json',
            rootProperty: function(rawData) {
                return Ext.isArray(rawData) ? rawData : [rawData];
            }
        }
    }
});

如果不想自动加载，也可以在Controller里手动调用Ext.getStore('GetShopSurvey').load()触发数据请求。

4. 验证Model字段匹配性 #

最后确认你的Test.model.GetShopSurvey里已经正确定义了range字段，比如：

Ext.define('Test.model.GetShopSurvey', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'range', type: 'int' } // 字段名和类型要和JSON返回的key完全匹配
    ]
});

这样调整后，你的Combobox就能正确从Store加载并显示range的值了。

内容的提问来源于stack exchange，提问作者harunB10