第一次从 JSON 响应加载时，Ext JS 为空 ItemSelector

Question

我正在使用 extjs 4 创建一个带有 Itemselector 的表单。我正在使用 Json 存储我的 JSON 响应如下：

{"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"}]}

我的表格

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);
}
});

我的商店

 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)]);
  }
   });

尽管 JSON 是正确的，但创建表单时它不会加载空白存储。哪里做错了？请帮忙。在此先感谢

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);
});
}

并且在存储中 autoLoad:false

Answer 2

您不需要像store: Ext.create('MyAPP.store.CommodityStore'), 那样手动创建商店

您通常只需输入store: 'CommodityStore'，ExtJs 会自动完成剩下的工作。