使用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"
}

我在此处阅读了许多文档和答案。我尝试使用某些存储方法，例如add(), insert(), load()，但可能是在错误的地方或其他地方使用了它们。我在这里问是因为我被困住了，我真的希望有人能帮助我。谢谢。

---

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

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

Response：

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

Answer 1

您可以尝试下一个工作示例。您需要使用load将记录插入商店的new Ext.data.Record侦听器中。还要检查tpl配置选项-需要正确显示空记录。示例已通过ExtJS 3.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
            }
        ]
    }); 
});