2012-05-21 50 views
-1

我建立使用的ExtJS 4.我使用JSON用于存储在那里我有JSON响应Itemselector如下形式加载的第一次时的Ext JS空ItemSelector:从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是正确的,但他仍然是空白商店。我做错了什么地方?请帮忙。在此先感谢

回答

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

而且在店内自动加载:假

0

你不需要手动创建一个存储为store: Ext.create('MyAPP.store.CommodityStore'),

你平时做的就是把store: 'CommodityStore'和ExtJS的会自动完成剩下的。

+0

沙感谢您的回复..但笏我调试的从服务器的响应需要时间所以这家店是空白的。当我硬编码的JSON它填充数据正确..所以笏可能是解决方案? – aswininayak

+0

您应该为商店的'load'事件添加事件处理程序并将所有数据分配到那里。 – sha

+0

我通过使用beforerender侦听器并绑定存储来解决此问题。有关更多详细信息,请参阅:http://stackoverflow.com/questions/9661503/ext-js-empty-itemselector-when-loaded-for-the-second-time/ – aswininayak