ExtJS:如何在另一个ComboBox中加载带有值的ComboBox?

时间:2012-10-20 05:00:32

标签: json extjs combobox

我有点像ExtJS菜鸟。我有一个ExtJS ComboBox(称之为CBa),其中value字段包含一个JSON字符串,选中后,应该加载到第二个组合框(CBb)中。

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

我为每个ComboBox添加了什么魔力来实现这一目标?

1 个答案:

答案 0 :(得分: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);
          }
    }
});

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

阅读评论后编辑:

您可以动态设置第二个组合的商店。将上面提到的选择事件更改为:

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.
}

}