dynamically load json data in combo box using Extjs3

Question

Help with any portion of this is appreciated. I am totally new to using extjs and the version is old (3.3). When the user selects the combo box, data is loaded in the combo box. I need to allow the user to select/insert a blank option (i.e.: so the first option should be id:0 field and can be blank). Last, I must give the model an additional field: id.

I can see the data returned in network tab, so I have the url path correct (the url was set up to return an id and list name), but the store property is empty, so no data in combo box.

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 () { }
       }
}),

Below code shows the response, but at index 0, id is 1. I need index 0 to be id: 0 or null value ( 0: {id: 0, name: ''} )

RESPONSE:

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

I have read alot of the docs and answers here on SO. I tried using some of the store methods, like add(), insert(), load(), but I'm probably using them in the wrong places or something. I'm asking here because I'm stuck and I really hope someone will help me. Thanks.

UPDATE: after beforeload, add this to store listeners to insert a blank record. Make sure your reader is accessing the right fields

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"
}
...

Zhorov Zhorov · Accepted Answer · 2019-02-12T07:33:29

You may try with next working example. You need to insert the record on store's load listener using new Ext.data.Record. Also check tpl config option - it's needed to show empty record correctly. Example is tested with ExtJS 3.4, but I think it should work with your version too.

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
            }
        ]
    }); 
});

dynamically load json data in combo box using Extjs3

1 Answers