ExtJS：如何加载具有另一个 ComboBox 中的值的 ComboBox？答案

【问题标题】：ExtJS: How do I load a ComboBox with the value in another ComboBox?ExtJS：如何加载具有另一个 ComboBox 中的值的 ComboBox？
【发布时间】：2012-10-23 12:46:35
【问题描述】：

我有点像 ExtJS 菜鸟。 I have a loaded up an ExtJS ComboBox (call it CBa) where the value field contains a JSON string that, when selected, should be loaded into a second combobox (CBb).

我能找到的所有示例都告诉我如何从外部 URL 加载 ComboBox，但在这种情况下，我想从本地已有的字符串加载它。

我在每个 ComboBox 上放置了什么魔法来实现这一点？

【问题讨论】：

标签： json extjs combobox

【解决方案1】：

您可以像这样创建本地组合：

// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data : [
        {"abbr":"AL", "name":"Alabama"},
        {"abbr":"AK", "name":"Alaska"},
        {"abbr":"AZ", "name":"Arizona"}
        //...
    ]
});

var combo2 = Ext.create('Ext.form.ComboBox',{

   // combo config;
});
// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Choose State',
    store: states,
    queryMode: 'local', //makes it a local combo. Don't need a url.
    displayField: 'name',
    valueField: 'abbr',
    renderTo: Ext.getBody(),
    listeners : {
          select : function() {
                var value = this.getValue();
                combo2.setValue(value);
          }
    }
});

使用combo 的select 事件将所选值设置到第二个组合中。请注意，所选值应该是存在于data 中的值，该值在combo2 的store 中定义，以便对其进行设置。阅读 setValue here 的文档以获取确切信息。

阅读评论后编辑：

您可以动态设置第二个组合的商店。把上面提到的select事件改成这样：

select : function()
{
      var dataArray = [],data = this.getValue(); //Json string
      dataArray.push(Ext.decode(data)); //In case there is only one object in the string instead of any array.
      combo2.getStore().loadData(dataArray, false); //dataArray is automatically parsed into Model Objects. Second param to allow append to existing store data.
}

}

【讨论】：

谢谢，这很有帮助，但并没有让我一路走好。第一个组合的值包含一个 json 字符串，表示应该在第二个组合的存储中的值。所以不是我想设置第二个combo的值，而是我想设置第二个combo的STORE。我是创建一个新商店并告诉第二个组合使用它，还是用我的 json 字符串更改第二个组合商店中的值？无论哪种情况，我如何为第二个组合管理这个动态的本地存储？