How can i loadData function as part of the Ext.data.JsonStore ExtJS3.0.0?

Question

I am running into with the loadData function as part of the Ext.data.JsonStore, Here data has come json format, but data didn ot load in jsonStore.

xtype: 'combo',
                    id: 'cmblocation',
                    width: 211,
                    displayField: 'name',
                    valueField: 'id',            
                    store: land,
                    emptyText: 'Select Location',
                    allowBlank: false,
                    listeners: {
                        afterrender: function () {
                            Ext.Ajax.request({
                                url: 'http://localhost:58316/Test.asmx/GetAll',
                                method: 'GET',
                                headers: { 'Content-Type': 'application/json' },
                                success: function (response) {                               
                                  var data = Ext.decode(Ext.decode(response.responseText).d);                                                           
                                   land: new Ext.data.JsonStore({
                                        root: data,
                                        fields: ['Id', 'Name']                                 
                                    });

Answer 1

For this you need to use loadData method of JsonStore.

A loadData method Loads an array of data straight into the Store.

Using this method is great if the data is in the correct format already (e.g. it doesn't need to be processed by a reader). If your data requires processing to decode the data structure, use a MemoryProxy or loadRawData.

In this FIDDLE, I have created a demo using combobox and Ext.Ajax.request. I hope this will help/guide you to achieve your requirements.

CODE SNIPPET

Ext.application({
    name: 'Demo',

    launch: function () {
        //Create combobox
        Ext.create('Ext.form.ComboBox', {
            fieldLabel: 'Choose Country',
            queryMode: 'local',
            margin: 10,
            store: Ext.create('Ext.data.JsonStore', {
                fields: ['code', 'name'],
                storeId: 'countryJsonStore'
            }),
            displayField: 'name',
            valueField: 'code',
            renderTo: Ext.getBody(),
            listeners: {
                afterrender: function (combo) {
                    //Call Ajax request to get data from json/server
                    Ext.Ajax.request({
                        //Here is server url/your method name
                        url: 'country.json',
                        method: 'GET',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        success: function (response) {
                            var data = Ext.decode(response.responseText).data;
                            /*
                             * Loads an array of data straight into the Store.
                             * Using this method is great if the data is in
                             * the correct format already (e.g. it doesn't need to be processed by a reader).
                             * If your data requires processing to decode the data structure, use a MemoryProxy or loadRawData.
                             */
                            combo.getStore().loadData(data);
                        }
                    });
                }
            }
        });
    }
});

For ExtJS 3.0, you can refer this FIDDLE

CODE SNIPPET Extjs 3.0

Ext.onReady(function() {
    // create the combo instance
    var combo = new Ext.form.ComboBox({
        typeAhead: true,
        triggerAction: 'all',
        lazyRender: true,
        mode: 'local',
        store: new Ext.data.JsonStore({
            // store configs
            autoDestroy: true,
            storeId: 'myStore',
            fields: ['country_id', 'country_name']
        }),
        valueField: 'country_id',
        displayField: 'country_name',
        listeners: {
            afterrender: function(combo) {
                //Call Ajax request to get data from json/server
                Ext.getBody().mask('Please wait...');
                Ext.Ajax.request({
                    //Here is server url/your method name
                    url: 'http://vocab.nic.in/rest.php/country/json',
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    success: function(response) {
                        Ext.getBody().unmask();
                        var data = Ext.decode(response.responseText);

                        /*
                         * Loads an array of data straight into the Store.
                         * Using this method is great if the data is in
                         * the correct format already (e.g. it doesn't need to be processed by a reader).
                         * If your data requires processing to decode the data structure, use a MemoryProxy or loadRawData.
                         */
                        combo.getStore().loadData(data.countries.map(item => {
                            return item.country;
                        }));
                    }
                });
            }
        }
    });

    combo.render(document.body);
});

You can also use proxy inside of jsonstore.

You can see In this FIDDLE

CODE SNIPPET

Ext.onReady(function() {

    var store = new Ext.data.JsonStore({
        autoLoad: true,
        root: 'countries',
        url: 'http://vocab.nic.in/rest.php/country/json',
        fields: ['country', {
            name: 'code',
            type: 'string',
            convert: function(v, rec) {
                return rec.country.country_id;
            }
        }, {
            name: 'name',
            type: 'string',
            convert: function(v, rec) {
                return rec.country.country_name;
            }
        }]
    });

    // create the combo instance
    var combo = new Ext.form.ComboBox({
        mode: 'local',
        store: store,
        valueField: 'code',
        displayField: 'name',
    });

    combo.render(document.body);
});