Extjs 使用combobox绑定json数组

我从一个页面得到一个json数组字符串作为响应。我想用组合框把它绑起来

yourCombo.store.loadData(obj.responsetext);

这是成功块，它为我提供了json数组字符串：

json数组字符串如下所示：

请让我知道如何将此与组合框下拉列表绑定

问候,

编辑：

这是我尝试的最新代码：

Ext.define('Country',{
extend: 'Ext.data.Model',
fields: [
    { name: 'id', type: 'string' },
    { name: 'name', type: 'string' }
]
});

Ext.define('CountryCombo', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.countrycombo',
allowBlank: false,
queryMode: 'local',
valueField: 'id',
displayField: 'name',
store: {
    model: 'Country',
    data: [
        { id: 'China', name: 'China'},
        { id: 'Japan', name: 'Japan'},
        { id: 'Malaysia', name: 'Malaysia'}
    ]
},
listeners: {
    "select": function(obj){  
        Ext.Ajax.request({
            url: '/CellEditing/FormServlet',
            method: 'POST',
            params: {
                data: obj.getValue()
            },
            success: function(obj){
                alert('success');
                alert(obj.responseText);
                console.log(StateCombo.storeStates); //This is undefined hence getting error
                StateCombo.storeStates.loadData(obj.responseText);
            },
            failure: function(obj){
                alert('failure');
            }
        });                 
    }
}
});

var storeStates = Ext.create('Ext.data.Store', {
autoLoad: false,
fields: ['State']
});

Ext.define('State',{
extend: 'Ext.data.Model',
fields: [
    { name: 'id', type: 'int' },
    { name: 'name', type: 'string' }
]
});

Ext.define('StateCombo', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.statecombo',
queryMode: 'local',
valueField: 'State',
displayField: 'State',
store: storeStates
});

---

这是我最近尝试的，但当我从第一个组合框中选择某个内容时，第二个组合框没有填充。请提供相关帮助？

使用loadData方法将数据加载到组合框中

yourCombo.store.loadData(obj.responsetext);

---

只是编辑后的一个简单想法， 响应包含

{“data”：[{“state”：“sanghai”}，{“state”：“state2”}}

在存储中以小写字母表示的状态定义为

字段：[“state']

ajax响应的另一个特性是json字符串，因此在调用存储的

loadData

方法之前应该对其进行解码

像

var response=Ext.decode（obj.responseText）

然后调用loadData作为
StateCombo.storeStates.loadData（response.data）
让我们看看下面使用绑定到两个不同存储的两个combobox控件的示例。更改第一个组合框将引发事件，该事件将根据所选值重新加载（在我的示例中，它会过滤）数据。然后重新加载第二个组合框的存储，并重新填充控件

这个例子展示了模型、存储和视图是如何协同工作并一起使用的。通常，它使用本地数据收集，但您可以轻松配置存储和代理，以便它从服务器端带来数据：

 // Set up a model to use in our Store
 Ext.define('Countries', {
     extend: 'Ext.data.Model',
     fields: [
         {name: 'abbr', type: 'string'},
         {name: 'name',  type: 'string'}
     ]
 });

// The data store containing the list of states
var countries = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    model: 'Countries', 
    data : [
        {"abbr":"US", "name":"United States"},
        {"abbr":"FR", "name":"France"}
        //...
    ]
});

 // Set up a model to use in our Store
 Ext.define('States', {
     extend: 'Ext.data.Model',
     fields: [
         {name: 'cntry', type: 'string'},
         {name: 'abbr', type: 'string'},
         {name: 'name',  type: 'string'}
     ]
 });

// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
    autoLoad: false,
    fields: ['abbr', 'name'],
    model: 'States', 
    data : [
        {"cntry": "US", "abbr":"AL", "name":"Alabama"},
        {"cntry": "US", "abbr":"AK", "name":"Alaska"},
        {"cntry": "US", "abbr":"AZ", "name":"Arizona"},
        {"cntry": "FR", "abbr":"PR", "name":"Paris"}
        //...
    ],
    listeners: {
        beforeload: function () {

        }
    }

});


// Create the combo box, attached to the states data store
var a = Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Choose Country',
    store: countries ,
    queryMode: 'local',
    displayField: 'name',
    valueField: 'abbr',
    // Basically this code was tested on Simple Online ExtJS Code Editor
    // http://ext4all.com/post/simple-online-extjs-code-editor
    // so it was bounded to the codeoutput control 
    renderTo: 'codeoutput', 
    listeners: {
        // when we change the value of Countries combobox, this event is raised
        change: function(obj, newVal, oldVal, eOpts) {
            // we can also use states.filter() function in the same way
            states.filterBy ( function(record, id) {
            // newVal variable is available due to closure, so we can compare the row with the selected country and result appropriate notification
            if (record.get("cntry")==newVal) return true;
          });
        }
    }
});


// Create the combo box, attached to the states data store
var a = Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Choose State',
    store: states,
    queryMode: 'local',
    displayField: 'name',
    valueField: 'abbr',
    renderTo: 'codeoutput'
});

从技术上讲，此代码将起作用：


主要的变化是：


您需要在ajax调用的success函数中对使用Ext.json.decode（response.responseText））返回的json字符串进行解码
您定义了一个状态模型，但状态存储没有使用它。它可以被移除
除了json字符串之外，状态变量在任何地方都大写。把它改成小写
您对state组合的引用只是该视图的模板类，而不是它的实例。此外，如果它是一个初始化类，那么它的store属性就是这样定义的，与变量名无关。您可以存储对已创建组合框的引用并调用它的storeproperties loadData函数，或者像我所做的那样，只使用storeStates引用来加载数据

虽然这在技术上可行，但它并不是最优雅的解决方案。您将使用更易于维护的代码来遵循此过程

为国家和州定义模型（理想情况下不在全局命名空间中！！），并为州存储区提供一个代理来自动解码json响应
定义使用模型作为基础的存储
为组合框定义视图（仅当它们将在其他地方重用时）
将组合框的实例放入某种容器中（使用视图类的Ext.create（）或create（）函数）
将侦听器附加到您创建的country组合的实例，并让它调用stateCombo的store的load函数

不能使用StateCombo，因为它是类的名称，而不是对象实例本身。因此，代码
StateCombo.storeState无法访问存储。

实际上，如果要访问存储以加载数据，可以通过两种方式进行。首先，因为在创建存储对象时将其保存在storeStates变量中，所以可以访问并使用它。storeStates要么是全局变量，要么是闭包所知的。因此，通过编写以下子句，可以执行所需的操作：

storeStates.loadData();

另一种方法是访问combobox控件，然后获取其绑定存储。访问该控件意味着不使用类名，而是使用其实例。要访问combobox控件，首先必须修改combobox声明，并通过设置itemId定义实例名：

Ext.define('StateCombo', {

itemId: 'stateCombo',
extend: 'Ext.form.field.ComboBox',
alias: 'widget.statecombo',
queryMode: 'local',
valueField: 'State',
displayField: 'State',
store: storeStates
});

一旦知道小部件，可以通过以下方式找到它：

var arr = Ext.ComponentQuery.query('stateCombo');

现在，我们可以加载数据：

if (arr.length>0)
   arr[0].loadData();

我将如何定义JSONStore？即，读取器URL中的值是什么？请让我知道。您应该使用Simplestore..因此无需提供读取器URL:）我尝试了，但缺少一些内容。我已经发布了我的最新代码。请让我知道我遗漏了什么。您为什么要执行单独的ajax请求，然后将数据放入存储中？为什么不直接使用存储来加载数据呢？谢谢你的评论。我在编辑部分更改了上面发布的代码。它也不起作用。请让我知道我在商店里错过了什么\Hi，我试了你的建议。我收到一个错误：
未捕获类型错误：无法调用未定义的方法“loadData”
任何帮助？？？尝试在选择侦听器上记录存储，您是否能够访问存储。比如
console.log（StateCombo.storeStates）当我尝试在控制台中记录它时，它正在打印
未定义的
。但我不知道这是为什么。这方面有什么帮助吗？您无法访问组合存储，请尝试将
itemId
提供给组合，然后尝试访问类似
Ext.ComponentQuery.query（'itemidofcombo'）
，一旦您可以访问组合存储，请尝试调用loadData。尝试此操作时：
console.log（Ext.ComponentQuery.query（'stateComboId'）然后在控制台中我得到
[]
。同样，当我尝试这样做时：
Ext.ComponentQuery.query（'stateComboId'）.loadData（response.data）然后我得到错误：
未捕获类型错误：对象没有方法“loadData”
此错误的原因是什么？感谢上面发布的代码，它在概念上帮助了我。在我发布的上述代码中，似乎问题在于仅在以json格式从服务器获取数据时配置存储和代理。你能
if (arr.length>0)
   arr[0].loadData();