extjs - 使用组合框绑定(bind) json 数组

Question

我从页面得到一个 json 数组字符串作为响应。我想用组合框绑定(bind)它。

这是给我 json 数组字符串的成功 block :

json 数组字符串如下所示:

请让我知道如何将其与组合框下拉列表绑定(bind)。

问候，

编辑:

这是我尝试过的最新代码:

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
});

这是我最近尝试过的，但当我从第一个组合框中选择某些内容时，第二个组合框仍未填充。请问有什么帮助吗？

Answer 1

从技术上讲，这段代码可以工作:

http://jsfiddle.net/sdt6585/wPzPD/29/

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()
                },
                callback: function (response, operation) {
                    //This should be the text string in reponseText, just putting it there since I don't have it
                    response.responseText = '{data: [{state: "State One"}, {state: "State Two"}, {state: "State Three"}]}'
                    //Put this in your success function
                    var data = Ext.JSON.decode(response.responseText).data;
                    storeStates.loadData(data);
                }
            });
        }
    }
});

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
});

Ext.form.Panel.create({
    title: 'Tester',
    renderTo: Ext.getBody(),
    items: [
        CountryCombo.create(),
        StateCombo.create()
    ]
});​

主要变化如下:

• 您需要在 ajax 调用的成功函数中解码使用 Ext.JSON.decode(response.responseText)) 返回的 json 字符串
• 您定义了一个状态模型，但状态存储没有使用它。它可以被移除。
• 除 json 字符串外，你的 state 变量在所有地方都大写。将其更正为小写。
• 您对状态组合的引用只是针对该 View 的模板类，而不是它的实例。此外，如果它是一个初始化类，它的存储属性就是这样定义的，与你的变量名无关。您可以存储对创建的组合框的引用并调用它的存储属性 loadData 函数，或者像我一样，只使用对存储的 storeStates 引用来加载数据。

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

1. 为国家和州定义模型(最好不要在全局命名空间中!!)并为状态存储提供代理以自动解码 json 响应。
2. 定义以模型为基础的商店
3. 为您的组合框定义 View (仅当它们将在别处重复使用时)
4. 将组合框的实例放入某种容器中(使用 Ext.create() 或 View 类的 create() 函数)。
5. 将监听器附加到您创建的国家/地区组合的实例，并让它调用 stateCombo 商店的加载函数。

---

Ext.define('MyApp.models.Country',{
    extend: 'Ext.data.Model',
    requires: ['Ext.data.SequentialIdGenerator'],
    idgen: 'sequential',
    fields: [
        { name: 'name', type: 'string' }
    ]
});

Ext.define('MyApp.stores.Country', {
    model: 'MyApp.models.Country',
    data: [
        { name: 'China'},
        { name: 'Japan'},
        { name: 'Malaysia'}
    ]
});

Ext.define('MyApp.models.State',{
    extend: 'Ext.data.Model',
    requires: ['Ext.data.SequentialIdGenerator'],
    idgen: 'sequential',
    fields: [
        { name: 'state', type: 'string' }
    ],
    proxy: {
        type: 'ajax',
        method: 'post',
        url: '/CellEditing/FormServlet',
        reader: {
            type: 'json',
            root: 'data',
            successProperty: false
        }
    }
});

Ext.define('MyApp.stores.State', {
    model: MyApp.models.State
});

Ext.define('MyApp.views.CountryCombo', {
    extend: 'Ext.form.field.ComboBox',
    alias: 'widget.countrycombo',
    allowBlank: false,
    queryMode: 'local',
    valueField: 'name',
    displayField: 'name',
    store: MyApp.stores.Country.create()
});

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

Ext.form.Panel.create({
    title: 'Tester',
    renderTo: Ext.getBody(),
    items: [
        countryCombo = MyApp.views.CountryCombo.create(),
        stateCombo = MyApp.views.StateCombo.create()
    ]
});

countryCombo.on('beforeselect', function (combo, record, index, eOpts) {
    stateCombo.store.load({
        params: {data: record.get('name')}
    });
});​