使用 JSON 填充 ComboBox ExtJS 4.2

Posted 2023-02-26

【中文标题】使用 JSON 填充 ComboBox ExtJS 4.2

【英文标题】：Populate ComboBox ExtJS 4.2 using JSON

【发布时间】：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。

【参考方案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();