使用JSON填充组合框ExtJS 4.2

Question

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

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"}]} 

而且以后我需要填充此组合框与将要返回的其他值从相同的格式从一个PHP使用GET即data.php？region = EAST。

Answer 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(); 
     } 
    } 
}