Question

我必须使用从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。

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

使用JSON填充ComboBox ExtJS 4.2

1 个答案: