CODEWITHSUNDEEP
c#.netextjs
Vinay Pratap Singh Bhadauria
Vinay Pratap Singh Bhadauria

Reputation: 9947

Data Loading Data into Sencha ComboBox with Ajax

I am learning extension.js, curently trying to loading remote data trough an Ajax call into a sencha combobox. I see the data comming as JSON but it is not loaded into combobox.

I am trying like this

<script type="text/javascript">        

    // Attach to onDOMReady event
    Ext.onReady(onReady);

    function onReady() {

        // Create store

        var states = new Ext.data.JsonStore({
            proxy: new Ext.data.HttpProxy({
                url: 'AspDropDownControl.aspx/GetCountries', // ASP.NET WebService call in GET format
                headers: {
                    'Content-type': 'application/json' // IMPORTANT! Without this FireFox will not understand WebService response 
                }
            }),
            root: 'd', // Root Json element, always 'd'
            id: 'CountryId', // Identifier column, ExtJS needs it to recognize rows
            fields: ['CountryId', 'CountryName'] // Simple definition of columns
        });

        var combo = new Ext.form.ComboBox({
            xtype: 'combo',
            fieldLabel: "Selecy your Country",
            mode: "remote",
            valueField: "CountryId",
            displayField: "CountryName",
            minChars: 1,
            //allowBlank: false, //to make it required
            anchor: "100%",
            emptyText: "Select an Country...",
            store: states,
            lazyRender: true,
            renderTo: Ext.get('content')
        });
    }
</script>

I am able to see JSON response as

{"d":[
{"CountryId":1,"CountryName":"Algeria"},
{"CountryId":2,"CountryName":"Benin"},
{"CountryId":3,"CountryName":"Cameroon"},
{"CountryId":4,"CountryName":"Chad"}]}

Upvotes: 1

Views: 697

Answers (2)

sra
sra

Reputation: 23973

You have some errors:

First: You should define a model to avoid problems with the automodels. This may not be your problem but it can be considered as best-practice. See the docs

Ext.define('CountryModel',{
   extend: 'Ext.data.Model',
   id: 'CountryId',
   fields: [{name:'CountryId',type:'int'}, 'CountryName'] 
});

Assign this model to the store with the following config line: model:'CountryModel'

Second: Ext.data.JsonStore is a shorthand for a Ext.data.Store pre-configured with a proxy for reading JSON from ajax request. But you are setting your own proxy and will therefore override this setting. In short: if you set your own proxy there is no benefit when using Ext.data.JsonStore

Third: Defining 

root: 'd', 
id: 'CountryId', 
fields: ['CountryId', 'CountryName']

on store level will have no effect cause the store didn't have any of these config properties. They belong to the reader/model. But there is a benefit of using models; the store will copy some settings of the model to proxy / reader for you.

Try this Store:

// don't forget to insert the model definition before you call this
var states = Ext.create('Ext.data.Store', {
    model: 'CountryModel',
    proxy: {
        type: 'ajax',
        url : 'AspDropDownControl.aspx/GetCountries',
        headers: {'Content-type': 'application/json'},
        reader: {
            type: 'json',
            root: 'd'
        }
    }
});

This is totally untested and you may still run into some issues but it should show you how it has to be done.

Please note that the headers are just applied to any request. They have nothing to do with reading and may only help the Server to better understand the incoming data.

Upvotes: 1

Varg__
Varg__

Reputation: 134

I'm not working with a JsonStore myself, but as far as I know "Id" and "root" are part of the Ext.data.reader.Reader

(I assume you want the idProperty btw, not the id, because they are completely different)

Your reader should look something like this

reader: {
    type: 'json',
    root: 'd',
    idProperty: 'CountryId'
}

Hope this helps and I am not completely misunderstanding something

Upvotes: 0

Related Questions