Blog Archive

ExtJs 4 add record to JSON store after loading data from server using Ajax Request

In the example below we have defined a model for country and have a JSON store for countries loaded using an Ajax request. After the JSON data is loaded from the server we add another record to the store.
//define the model

Ext.define('COMBO.model.Country', {
    extend: 'Ext.data.Model',
    fields: [
             'code',
             'name',
             'continent',
             'region',
             'lifeExpectancy',
             'gnp'
             ]
});

//define the store

Ext.define('COMBO.store.LocalCountries', {
    extend: 'Ext.data.Store',
    model: 'COMBO.model.Country',
    autoLoad: true,
    pageSize: 9999,
   
    proxy: {
        type: 'ajax',
        url: 'CountryServlet',
        reader: {
            type: 'json',
            root: 'countries',
            successProperty: 'success'
        },
     },
     
     listeners: {
            load: function () {
                //this sets the default value to USA after the store loads
                var combo = Ext.getCmp('countrySearchBox');
                this.add(Ext.create('COMBO.model.Country', {
                    code:'MARS',
                    name:'MARS Country',
                    continent: 'MARS',
                    region: 'NORTH',
                    lifeExpectancy: 9999,
                    gnp: 99.99
                })
                );
                combo.setValue("MARS");
            }
         }
});

ExtJs 4 add record to JSON store