使用Extjs3在组合框中动态加载json数据

Question

如有任何帮助，我们将不胜感激。我对使用extjs完全陌生，版本也很旧(3.3)。当用户选择组合框时，数据会加载到组合框中。我需要允许用户选择/插入一个空白选项(即：所以第一个选项应该是id:0字段，并且可以是空白的)。最后，我必须给模型一个额外的字段：id。

我可以在网络选项卡中看到返回的数据，所以我有正确的url路径(url设置为返回id和list name)，但store属性是空的，所以组合框中没有数据。

header: 'Bucket List',
sortable: true,
dataIndex: 'bucket_list',
width: 10,
align: 'center',
editor: BucketList = new Ext.form.ComboBox({
valueField: 'name',
displayField: 'name',
triggerAction: 'all',
typeAhead: true,
preventMark: true,
editable: false,
store: new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: '/todos/sysadmin/bucket-lists',
method: 'GET'
}),
reader: new Ext.data.JsonReader({
root: 'bucket_lists',
fields: [
'id',
'name'
]
}),
listeners: {
beforeload: function (data_objStore, data_objOpt) {
data_objOpt.params.userModel = userModelCbx.getValue();                                          
data_objOpt.params.user_id = 001;
}
}
}),
listeners: {
blur: function () { }
}
}),

下面的代码显示了响应，但在索引0处，id为1。我需要索引0为id: 0或空值(0: {id: 0, name: ''})

回应：

0: {
id: 1, 
name: "bucketListItem_1"
}
1: {
id: 2, 
name: "bucketListItem_2"
}
2: {
id: 3, 
name: "bucketListItem_3"
}
3: {
id: 4, 
name: "bucketListItem_4"
}

我已经阅读了很多关于SO的文档和答案。我尝试过使用一些存储方法，比如add(), insert(), load()，但我可能在错误的地方使用了它们。我来这里是因为我被困了，我真的希望有人能帮助我。谢谢。

---

更新：在beforeload之后，将其添加到store侦听器以插入空白记录。确保您的阅读器访问正确的字段

beforeload: function( sObj, optObjs ){
// code here...
},    
load: function(store, records) {                                           
store.insert(0, [new Ext.data.Record({
id: null,
name: 'None'
})
]);
}

响应：

0: {
id: null, 
name: "None"
}
1: {
id: 1, 
name: "bucketListItem_1"
}
2: {
id: 2, 
name: "bucketListItem_2"
}
...

Answer 1

您可以尝试下一个工作示例。您需要使用new Ext.data.Record在商店的load侦听器上插入记录。还要检查tpl配置选项-这是正确显示空记录所必需的。示例已经用ExtJS3.4进行了测试，但我认为它也应该与您的版本一起使用。

Ext.onReady(function() {
var combo = new Ext.form.ComboBox({
tpl : '<tpl for="."><div class="x-combo-list-item">{name}&nbsp;</div></tpl>',
valueField: 'name',
displayField: 'name',
triggerAction: 'all',
typeAhead: true,
preventMark: true,
editable: false,
store: new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: '/todos/sysadmin/bucket-lists',
method: 'GET'
}),
reader: new Ext.data.JsonReader({
root: 'bucket_lists',
fields: [
'id',
'name'
]
}),
listeners: {
load: function (s) {
record = new Ext.data.Record({
id: 0,
name: ''
});
s.insert(0, record);
}
}
})
});
var grid = new Ext.grid.EditorGridPanel({
renderTo: Ext.getBody(),
store: new Ext.data.Store({
autoLoad: true,
proxy: new Ext.data.HttpProxy({
url: 'combo-extjs3-editor-json.html',
method: 'GET'
}),
reader: new Ext.data.JsonReader({
root: 'bucket_lists',
fields: [
'id',
'name'
]
})
}),
width: 600,
height: 300,
columns: [
{
header: 'Name',
dataIndex: 'name',
width: 130,
editor: combo
}
]
}); 
});