使用本地JSON数据填充ExtJS 3.4组合框

时间:2012-12-24 14:01:25

标签: javascript json extjs extjs3

我正在使用ExtJS 3.4,我需要使用以下数据填充组合框:

"[{"cod_domini":"1","nom_domini":"Sant Esteve de Palautordera"},{"cod_domini":"2","nom_domini":"Parc Natural del Montseny"},{"cod_domini":"5","nom_domini":"Sant Pere de Vilamajor"},{"cod_domini":"6","nom_domini":"Santa Maria i Mosqueroles"}]"

来自之前的XMLHttpRequest,我将它存储在变量中:

my_variable = "[{"cod_domini":"1","nom_domini":"Sant Esteve de Palautordera"},{"cod_domini":"2","nom_domini":"Parc Natural del Montseny"},{"cod_domini":"5","nom_domini":"Sant Pere de Vilamajor"},{"cod_domini":"6","nom_domini":"Santa Maria i Mosqueroles"}]"

所以,我有以下ExtJS 3.4组合框:

cbxSelDomini = new Ext.form.ComboBox({
                            hiddenName: 'Domini',
                            name: 'nom_domini',
                            displayField: 'nom_domini',
                            valueField: 'cod_domini',
                            mode: 'local',
                            triggerAction: 'all',
                            listClass: 'comboalign',
                            typeAhead: true,
                            forceSelection: true,
                            selectOnFocus: true,
                            store: mystore
});

这个组合框用于从名为“mystore”的Ext.data.Store获取数据:

store: mystore = new Ext.data.Store({
                                    autoload: true,
                                    reader: new Ext.data.ArrayReader(
                                        {
                                            idIndex: 0  // id for each record will be the first element
                                        }),
                                    data: dataprova,
                                    fields: [ 
                                                        {type: 'integer', name: 'cod_domini'},
                                                        {type: 'string', name: 'nom_domini'}
                                                    ]
                                    }),

我的第一个问题是,在第一个实例中,数据未加载到dataStore,甚至明确告知:mystore.loadData(my_variable);

有人可以试着告诉我我做错了什么吗?在fireBug中,我得到的错误有“this.data未定义”,“this.reader未定义”,或“b未定义”和“h未定义”。

当我将数据格式更改为javascript数组时会出现同样的错误:

var dataexample = [[1, 'Sant Esteve de Palautordera'], [2, 'Parc Natural del Montseny']];

并在商店“data”属性上调用dataexample。

我绝对迷失了......

1 个答案:

答案 0 :(得分:7)

变量my_variable中的数据采用JSON格式,因此应使用JsonReader。要使用该阅读器,您只需JsonStore即可使用。示例:

var data = '[{"cod_domini":"1","nom_domini":"Sant Esteve de Palautordera"},{"cod_domini":"2","nom_domini":"Parc Natural del Montseny"},{"cod_domini":"5","nom_domini":"Sant Pere de Vilamajor"},{"cod_domini":"6","nom_domini":"Santa Maria i Mosqueroles"}]';

var mystore = new Ext.data.JsonStore({
    //autoload: true,
    fields: [ 
        {type: 'integer', name: 'cod_domini'},
        {type: 'string', name: 'nom_domini'}
    ]
});
mystore.loadData(Ext.decode(data)); // decode data, because it is in encoded in string

var cbxSelDomini = new Ext.form.ComboBox({
    hiddenName: 'Domini',
    name: 'nom_domini',
    displayField: 'nom_domini',
    valueField: 'cod_domini',
    mode: 'local',
    triggerAction: 'all',
    listClass: 'comboalign',
    typeAhead: true,
    forceSelection: true,
    selectOnFocus: true,
    store: mystore
});

工作样本:http://jsfiddle.net/Ajnw7/