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

Posted 2023-02-26

【中文标题】使用本地 JSON 数据填充 ExtJS 3.4 组合框

【英文标题】：Populate ExtJS 3.4 combobox with local JSON data

【发布时间】：2012-12-24 14:01:24

【问题描述】：

我正在使用 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 is not defined”、“this.reader is not defined”或“b is undefined”和“h is undefined”之类的错误。

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

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

并在存储“数据”属性上调用 dataexample。

我完全迷路了......

【参考方案1】：

变量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/

【讨论】：

您好，感谢您的回答。按照您的示例，我几乎可以正常工作。要填充组合框，我需要在 firebug 上明确告诉 mystore.loadData(Ext.decode...) ，因为当我加载应用程序时它不会自动填充。换句话说，程序在加载应用程序时会忽略 mystore.loadData(Ext.decode...) 语句。我想这是因为我在一个函数中得到了所有这些过程。我对吗？我应该怎么做才能解决这个问题？

如果你已经解决了，你能把答案写下来给我们这些有同样问题的人吗？谢谢！