javascript - 使用 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, 名称: ''} )

回复:

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 配置选项 - 它需要正确显示空记录。示例已使用 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
            }
        ]
    }); 
});