使用 JSON 填充 ComboBox ExtJS 4.2答案

【问题标题】：Populate ComboBox ExtJS 4.2 using JSON使用 JSON 填充 ComboBox ExtJS 4.2
【发布时间】：2014-03-25 17:29:29
【问题描述】：

我必须使用从 php 接收的 JSON 数据在 ExtJS 4.2 中填充 ComboBox。到目前为止的代码：数据存储：

var Cstates = new Ext.data.Store({
    autoLoad: true,
    url: 'data.php',
    storeId: 'Cstates',
    reader: new Ext.data.JsonReader({
        root: 'state'
    }),
    idProperty: 'abbr',
    fields: ['abbr', 'name']
});

组合框：

{
    xtype: 'combo',
    id: 'cmbState',
    fieldLabel: ' Select state :',
    triggerAction: 'all',
    store: Cstates,
    queryMode: 'local',
    valueField: 'abbr',
    displayField: 'name',
    triggerAction: 'all',
    typeAhead: true,
    emptyText: '* All States',
    forceSelection: true,
    selectOnFocus: true,
    allowBlank: false,
    selectOnTab: true,
    //hidden: true,
    disabled: true
}

收到的 JSON：

{state:[{"abbr":"E1","name":"EAST1"},{"abbr":"E2","name":"EAST2"}]}

稍后我还需要使用 GET 从 php 以相同格式返回的其他值填充此组合框，即 data.php?region=EAST。

【问题讨论】：

那么问题到底是什么？你试过什么吗？你有什么错误吗？
您是否正在查看如何从新网址重新加载store？
也尝试过 JSONReader 之类的东西，但都没有成功，上面的代码没有填充组合框，甚至 firebug 显示没有 GET req 被触发到 php。

标签： javascript ajax json extjs combobox

【解决方案1】：

这是链式组合框的工作示例

// first combobox model definition
Ext.define('ArticleMainGroup', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'PWHG', type: 'int'},
        {name: 'PWHG_BEZ', type: 'string'}
    ]
});

// first combobox store definition
var articleMain = new Ext.data.JsonStore({
    model: 'ArticleMainGroup',
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url: '<?php echo base_url() ?>dashboard/promotion',
        reader: {
            type: 'json',
            root: 'ArticleMainGroup',
            idProperty: 'PWHG'
        }
    }
});

// second combobox store definition
var articleBase = new Ext.data.JsonStore({
    model: 'ArticleBaseGroup',
    proxy: {
        type: 'ajax',
        url: '<?php echo base_url() ?>dashboard/promotion',
        reader: {
            type: 'json',
            root: 'ArticleBaseGroup',
            idProperty: 'PWG'
        }
    }
});

// first combobox definition
{
    xtype: 'combobox',
    fieldLabel: 'ANA MAL GRUBU',
    store: articleMain,
    id: 'art-main-group',
    queryMode: 'local',
    autoSelect: true,
    forceSelection: true,
    triggerAction: 'all',
    inputWidth: 240,
    margin: '5 0 0 0',
    listConfig: { cls: 'combo-dep' },
    valueField: 'PWHG',
    displayField: 'PWHG_BEZ',
    listeners: {
        select: function(combo) {
            Ext.getCmp('art-base-group').setValue("");
                /**
                 * this is the important part
                 * articleBase is a store definition which is bound to second combobox
                 * when we send a parameter by extraParams, the target store using this 
                 * parameter via url string
                 * after that we should re-load the target store by load() method
                 * as a result, target combobox will populate based on this url parameter
                 * like http://localhost/dashboard?maingroup=10
                 */
            articleBase.proxy.extraParams = {'maingroup': combo.getValue()};
            articleBase.load();
        }
    }
}

// second combobox definition
{
    xtype: 'combobox',
    fieldLabel: 'MAL GRUBU',
    store: articleBase,
    id: 'art-base-group',
    queryMode: 'local',
    autoSelect: false,
    forceSelection: true,
    triggerAction: 'all',
    editable: false,
    valueField: 'PWG',
    displayField: 'PWG_BEZ',
    inputWidth: 240,
    margin: '10 0 0 0',
    listConfig: { cls: 'combo-dep' },
    listeners: {
        select: function(combo) {
            Ext.getCmp('art-sub-group').setValue("");
            articleSub.proxy.extraParams = {'maingroup': Ext.getCmp('art-main-group').getValue(), 'basegroup': combo.getValue()}
            articleSub.load();
        }
    }
}

【讨论】：