Ext JS empty ItemSelector when loaded for the First time from a JSON response

Question

I am creating a form with Itemselector using extjs 4. I am using Json for store where I have the JSON response as follows:

{"items":[{"id":"12","name":"Cable"},{"id":"8","name":"Document"},{"id":"1","name":"Equipment"},{"id":"2","name":"Instrument"},     {"id":"10","name":"Isometric"},{"id":"11","name":"Joint"},{"id":"4","name":"Line"},{"id":"3","name":"LineSeg"},{"id":"5","name":"Specialty"},{"id":"6","name":"Spool"},{"id":"7","name":"Valve"},{"id":"9","name":"Weld"}]}

My Form

Ext.require([
        'Ext.ux.form.MultiSelect',
        'Ext.ux.form.ItemSelector'
        ]);


Ext.define('MyAPP.view.directory.MyForm', {
    extend: 'Ext.form.Panel',
alias:'widget.myform',
    border: false,
    split: true,
bodyPadding: 5,
lableWidth:30,
autoScroll : true,
defaults: {
    anchor: '100%'

},
defaultType: 'textfield',
items: [
    {
xtype:'fieldset',
title: 'Commodities',
collapsible: true,
border:0,
defaultType: 'textfield',
defaults: {anchor: '100%'},
layout: 'anchor',
items :[
      {
        xtype: 'itemselector',
        name: 'commoselector',
        id:'commoselector',
        listAvailable:'',
        listSelected:'',
        fieldLabel: '',
        imagePath: 'extjs407/ux/css/images/',
        store: Ext.create('MyAPP.store.CommodityStore'),
        displayField: 'name',
        valueField: 'id',
        //value: ['9'],
        //allowBlank: false,
        msgTarget: 'under'
      }
 ]
},



 initComponent: function () {
    this.callParent(arguments);
}
});

My Store

 Ext.define('MyAPP.store.CommodityStore', {

  extend: 'Ext.data.Store',

 constructor: function(cfg) {

 var me = this;
 cfg = cfg || {};
 me.callParent([Ext.apply({
     autoLoad: true,
     autoDestroy: true,
     storeId: 'CommodityStore',
     proxy: {
        type: 'ajax',
        url: 'getCommodityList',
        reader: {
            type: 'json',
            root: 'items'
        }
    },
    fields: [
            {name: 'id'},
            {name: 'name'}
    ]
   }, cfg)]);
  }
   });

When the form created its not loading the blank store although the JSON is correct. Where am doing wrong? Please help. Thanks in advance

Answer 1

initComponent: function () {
var me = this;
Ext.applyIf(me, {
    listeners: {
    beforerender: {
            fn: me.onFormBeforeRender,
            scope: me
        }
   }
});

me.callParent(arguments);

},

onFormBeforeRender: function(abstractcomponent, options) {
        // where store is created globally like this var store =          Ext.create('TIP.store.CommodityStore');

store.load(function(){
    Ext.getCmp("commoselector").bindStore(store);
});
}

And in store autoLoad:false

Answer 2

You don't need to create a store manually as in store: Ext.create('MyAPP.store.CommodityStore'),

What you usually do is just put store: 'CommodityStore' and ExtJs will do the rest automatically.