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

【问题标题】：Binding Ext.data.JsonStore to linked comboboxes将 Ext.data.JsonStore 绑定到链接的组合框
【发布时间】：2014-02-09 08:38:20
【问题描述】：

我是 extJS 的新手。我有 2 个与公共数据存储绑定的组合框。下面是商店-

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

这里Type 是一个字符串，TypeDetails 是一个具有字段Description 的数组列表。一个Type 可以有多个Description。

我的要求是，我必须将一个组合框与Type 绑定，并且当我选择一个Type 时，只有当前Type 的Description 应该与组合框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

【问题讨论】：

标签： extjs extjs3

【解决方案1】：

您应该使用代理定义的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',

【讨论】：