Ext JS第二次加载时为空ItemSelector [英] Ext JS empty ItemSelector when loaded for the second time
问题描述
//我的窗口定义
Ext.define（ Sigep.view.ProjectForm'，{
extends：'Ext.Window'，
使用：['Ext.ux.form.ItemSelector']，
id：projectFormWindow，
title：'New Project'，
autoHeight：true，
width：700，
modal：true，
layout：'fit'，
initComponent：function （）{
var win = this;
var studentStore = Ext.create（'Sigep.store.StudentsStore'）;
this.items = [
{
xtype：form，
id：'projectForm'，
bodyPadding：10，
border：false，
autoHeight：true，
postUrl：baseURL +'projects / save'，
defaults：{
border：false
}，
fieldDefaults：{
labelAlign：'left'，
labelWidth：110，
msgTarget：'side'
}，
items：[
{
xtype：' tab p
plain：
activeTab：0，
height：260，
margin：'10 0 0 0'，
defaults：{
bodyStyle：'padding：10px'
}，
items：[{
title：'Autor（es）'，
defaults：{
defaultType：'textfield'作者] []'，
id：'itemselector-field'，
anchor：'100％'，
labelWidth：90，
width：600，
height ：210，
fieldLabel：'ItemSelector'，
imagePath：baseURL +'extjs / ux / images /'，
store：studentStore，
displayField：'fullName'，
valueField：'userId'，
maxSelections：2，
按钮：['add'，'remove']，
delimiter：null
}
]
}]
}
]
}
];
this.buttons = [{
text：'Save'，
handler：function（）{
win.close（）;
}
}，{
文本：'取消'，
处理程序：function（）{
win.close（）;
}
}];
studentStore.load（）;
this.callParent（）;
}
}）;
//////////////////////////////////////////// /
//在按钮的点击事件
var win = Ext.create（'Sigep.view.ProjectForm'）;
win.show（）;
////////////////////////////////////// ////
//商店定义
Ext.define（'Sigep.store.StudentsStore'，{
extends：'Ext.data.Store'，
fields： ['userId'，'fullName']，
proxy：{
type：'ajax'，
url：baseURL +'accounts / students'，
reader：{
类型：'json'，
root：'results'
}
}
}）;
我还尝试设置 autoLoad：true 商店，但它不工作，所以，你可以看到，一切都很简单，我第一次打开窗口，一切正常，但当我关闭并再次打开，ItemSelector是空的，我试过每个事件我都可以尝试，没有任何工作，与FireBug，窗口显示后，我执行这样的事情
//如果我在窗口显示后执行这个代码，项目选择器将被填充数据
var item = Ext.getCmp（projectFormWindow）。down（'＃itemselector-field'）;
var store = item.store;
item.bindStore（store）;
该代码在窗口显示后重新加载itemselector，所以我在show事件中尝试过，但是不工作，如果我把一个按钮放在窗口中，并且在处理程序中这3行，ItemSelector被加载好了。有趣的是ItemSelector可以扩展MultiSelect，如果我将xtype更改为multiselect，那么它的效果非常好，只是完美的，但是ItemSelector的内部是定义代码，我认为是在第二次加载 toField 没有被创建，但我不知道如何处理这个，
所以，存在一个工作区这个？一种使其工作的方式？希望你可以帮助我们。
谢谢
进入Ext js论坛，有人给了一个解决方案，我不知道它是否是最好的，但它适用于我，
studentStore.load（function（）{
win.down（'＃itemselector-field'）。bindStore（studentStore）;
}）;
现在，它正在工作，因为我想要
希望它可以帮助别人
i'm a newbie with ExtJS, i'm using ExtJS 4.0.7 and what they call MVC, just getting use to the code, so, i was taking a look to the examples, and there is one that works perfect for what i'm trying to do, the "MultiSelect and ItemSelector" example, more specific, the ItemSelector, that is the one i'm using, it use some kind of library named "ux", that is show for example i think, but the ItemSelector is ok form me, i don't want to change or add nothing to the component, so, what i do is, create a Window with a Form in it, and within the form an ItemSelector, the ItemSelector use a remote store cuz i load the data from the database, everything works perfect, i can see the data in the ItemSelector and use the component, the problem is when i close the window and open it again, the ItemSelector is just empty, no error, no warning, nothing that point to a problem, just an empty ItemSelector, this is my code:
//My window definition
Ext.define('Sigep.view.ProjectForm', {
extend: 'Ext.Window',
uses: ['Ext.ux.form.ItemSelector'],
id:"projectFormWindow",
title: 'New Project',
autoHeight:true,
width: 700,
modal:true,
layout: 'fit',
initComponent: function() {
var win = this;
var studentStore = Ext.create('Sigep.store.StudentsStore');
this.items = [
{
xtype:"form",
id: 'projectForm',
bodyPadding: 10,
border:false,
autoHeight:true,
postUrl:baseURL+'projects/save',
defaults: {
border:false
},
fieldDefaults: {
labelAlign: 'left',
labelWidth: 110,
msgTarget: 'side'
},
items:[
{
xtype:'tabpanel',
plain:true,
activeTab: 0,
height:260,
margin: '10 0 0 0',
defaults:{
bodyStyle:'padding:10px'
},
items:[{
title:'Autor(es)',
defaults: {
allowBlank:false
},
defaultType: 'textfield',
items:[
{
xtype: 'itemselector',
name: 'project[authors][]',
id: 'itemselector-field',
anchor: '100%',
labelWidth: 90,
width:600,
height:210,
fieldLabel: 'ItemSelector',
imagePath: baseURL+'extjs/ux/images/',
store: studentStore,
displayField: 'fullName',
valueField: 'userId',
maxSelections:2,
buttons: ['add', 'remove'],
delimiter:null
}
]
}]
}
]
}
];
this.buttons= [{
text: 'Save',
handler:function(){
win.close();
}
},{
text: 'Cancel',
handler:function(){
win.close();
}
}];
studentStore.load();
this.callParent();
}
});
///////////////////////////////////////////////
//In a click event of a button
var win = Ext.create('Sigep.view.ProjectForm');
win.show();
//////////////////////////////////////////////
//The Store definition
Ext.define('Sigep.store.StudentsStore', {
extend: 'Ext.data.Store',
fields: ['userId', 'fullName'],
proxy: {
type: 'ajax',
url:baseURL+'accounts/students',
reader: {
type: 'json',
root: 'results'
}
}
});
I also tried setting autoLoad:true to the store, but it doesn't work neither, so, As you can see, all is very simple, the first time i open the window, everything works ok, but when i close and open again, the ItemSelector is empty, i tried with every event i can try already, and nothing work, with the FireBug, after the window is show, i execute something like this
//if i execute this code after the window is show, the item selector is filled with the data
var item = Ext.getCmp("projectFormWindow").down('#itemselector-field');
var store = item.store;
item.bindStore(store);
this code reload the itemselector after the window is show, so i tried in the show event, but it doesn't work, if i put a button in the window and in the handler this 3 lines, the ItemSelector is loaded ok. the funny is that ItemSelector extend MultiSelect, and if i change the xtype to multiselect, it works great, just perfect, but what about the ItemSelector, i was looking inside the definition code and i think is something like in the second load the toField is not getting created, but i don't know how to deal with this,
so, exist a workarround for this? a way to make it work? hope you can help me guys
thanks
I was looking into the Ext js forum, someone gave a solution, i don't know if it is the best but it works for me,
studentStore.load(function(){
win.down('#itemselector-field').bindStore(studentStore);
});
now, it is working as i wanted
hope it can help others
这篇关于Ext JS第二次加载时为空ItemSelector的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
