将Ext.data.JsonStore绑定到链接的组合框

时间:2014-02-09 08:38:21

标签: extjs extjs3

我是extJS的新手。我有2个组合框,与常见的数据存储绑定。 以下是商店 -

comboStore = new Ext.data.JsonStore({
url: 'Getvalues',
root: 'rows',
autoLoad: true,
fields: ['Type', 'TypeDetails']
});

此处Type是字符串,TypeDetails是包含字段Description的数组列表。一个Type可以有多个Description

我的要求是,我必须将一个组合框与Type绑定,当我选择Type时,只有Description有效Type应与组合框2绑定。

我试过了 -

                xtype: 'combo',
                id: 'cmbType',
                editable: true,
                typeAhead: true,
                allowBlank: false,
                displayField: 'Type',
                valueField: 'Type',
                hiddenName: 'Type',
                store: comboStore,
                mode: 'local',
                triggerAction: 'all',
                selectOnFocus: true,
                emptyText: 'Select Type'
                , listeners: {
                    select: function (cmb, record, index) {

                    }
                }



                xtype: 'combo',
                id: 'cmbDesc',
                editable: true,
                typeAhead: true,
                allowBlank: false,
                displayField: 'Description',
                valueField: 'Description',
                hiddenName: 'Description',
                store: comboStore,
                mode: 'local',
                triggerAction: 'all',
                selectOnFocus: true,
                emptyText: 'Select Type first'

我应该在combo1 select中做些什么? 我正在使用extJS 3.4

1 个答案:

答案 0 :(得分:0)

您应该使用代理定义的extraParams属性!如下所示:

/**
 * Model Definition
 */
 Ext.define('comboModel', {
     extend: 'Ext.data.Model',
     fields: [
         {name: 'Type', type: 'int'},
         {name: 'TypeDetails', type: 'string'}
     ]
 });

/**
 * Model Definition
 */
 Ext.define('descModel', {
     extend: 'Ext.data.Model',
     fields: [
         {name: 'Description', type: 'int'},
         {name: 'DescDetails', type: 'string'}
     ]
 });



/**
 * JsonStore Deifinition
 *
 * Here we will define a JsonStore which will interact server.
 * The returning value type from server should be json! 
 * Also, do not forget to specify root and idProperty
 */
var comboStore = new Ext.data.JsonStore({
    model : 'comboModel', // you should identify of your model
    proxy: {
        type: 'ajax',
        url: '/path/to/your/server/url',
        reader: {
            type: 'json',
            root: 'rows',
            idProperty: 'ROOT_ID
        }
    }
});

var descriptionStore = new Ext.data.JsonStore({
    model: 'descModel',
    proxy: {
       type: 'ajax',
       url: '/path/to/your/server/url',
       reader: {
          type: 'json',
          root: 'descriptions',
          idProperty: 'DESC_ID'
       }
    }
});

 xtype: 'combobox',
 store: 'comboStore',
 valueField: 'Type',
 displayField: 'TypeDetails',
 listeners: {
     select: function(val) {
         // here is the important part, we are sending the query string
         // param by url, like /?desc=122332
         descriptionStore.proxy.extraParams = {'desc': val.getValue()}
         descriptionStore.load();
     }
 }

 xtype: 'combobox',
 store: 'descriptionStore',
 valueField: 'Description',
 displayField: 'DescDetails',