Loading selectfield from an external json file

[riyaad]

Hi Sencha People

Is there a way to populate a select field by means of an external json file?

        var store = Ext.create('Ext.data.Store', {
            model: 'ListItems',
            storeId: 'itemStore',
            proxy: {
                type: 'ajax',
                url: 'itemList.json',
                reader: {
                    type: 'json'
                }
            },
            autoLoad: true
        });

then doing ...

        var item_ddn = new Ext.field.Select({
            name: 'item_ddn',
            label: 'Items Listed:',
            store: store
        });

How does one bind the the item_id to the item_name (as in the JSON below) and list it?

JSON code...

[
   {
      "item_id" : "113",
      "item_name" : "Metro Goldwyn Mayer"
   },
   {
      "item_id" : "106",
      "item_name" : "M-Net Action"
   }
]

**Appreciated**

[mitchellsimoens]

Set the valueField config to 'item_id' and the displayField config to 'item_name' on your Select field. I would also set the idProperty on your Model to 'item_id' and you should have things setup pretty well. One last thing instead of doing 'new Ext.field.Select', you should do the ST2 way and do "Ext.create('Ext.field.Select' "

[riyaad]

Hi Mitchell Simoens,

Brilliant - thank you again. I did some more reading, had some more coffee and trial'n error sessions and got it working nicely ...

Here's the code (for anyone else out there looking for this) ... pretty straight forward once you get the hang of it.

Ext.application({
    name: 'Dynamic Menu',


    launch: function() {


        Ext.define('MenuItems', {
            extend: 'Ext.data.Model',
            idProperty: 'item_id',
              fields: [
                {name: 'item_id',   type: 'string'},
                {name: 'item_name', type: 'string'}
            ]
        });


        var store = Ext.create('Ext.data.Store', {
            model: 'MenuItems',
            storeId: 'MenuStore',
            proxy: {
                type: 'ajax',
                url: 'menu.json',
                reader: {
                    type: 'json'
                }
            },
            autoLoad: true
        });


        var bundle_ddn = Ext.create('Ext.field.Select', {
            name: 'item_ddn',
            label: 'Bouquet:',
            valueField: 'item_id',
            displayField: 'item_name',
            store: store
        });


        var formBase = {
            scroll: 'vertical',
            title: 'Settings',
            items: [ bundle_ddn ]
        };


        Ext.create('Ext.tab.Panel', {
            fullscreen: true,
            items: [ formBase ]
        });


    }
});

Regards,
Riyaad

[riyaad]

PS: Does anyone know if this has been resolved?
http://www.sencha.com/forum/showthre...-no-selection.

I'm assuming there's yet to be a fix for STv2 as I'm getting the same behavior...