Ext JS пусто ItemSelector при загрузке во второй раз

Question

Я новичок в ExtJS, я использую ExtJS 4.0.7 и то, что они называют MVC, просто привыкаю к ​​коду, так что я посмотрел на примеры, и есть один, который отлично работает для того, что я пытаюсь сделать, пример «MultiSelect and ItemSelector», более конкретно, ItemSelector, то есть тот, который я использую, он использует какую-то библиотеку с именем «ux», которая показана, например, show , но ItemSelector в порядке со мной, я не хочу ничего менять или добавлять в компонент, поэтому, что я делаю, создаю окно с формой в нем, и внутри формы ItemSelector ItemSelector использует удаленное хранилище, потому что я загружаю данные из базы данных, все отлично работает, я вижу данные в ItemSelector и использую компонент, проблема в том, что когда я закрываю окно и открываю его снова, ItemSelector просто пуст, ошибки нет, без предупреждения, ничего, что указывает на проблему, просто пустой ItemSelector, это мой код:

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

Я также пытался установить autoLoad:true для магазина, но он тоже не работает, так что, как видите, все очень просто, когда я впервые открываю окно, все работает нормально, но когда я закрываюсь и снова открыть, ItemSelector пуст, я пытался с каждым событием, которое я уже могу попробовать, и ничего не работает, с FireBug, после того, как окно показывает, я выполняю что-то вроде этого

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

этот код перезагружает itemselector после того, как окно показывается, поэтому я попытался в событии show, но это не работает, если я помещаю кнопку в окно и в обработчик этих 3 строк, ItemSelector загружается нормально , забавно то, что ItemSelector расширяет MultiSelect, и если я изменяю xtype на multiselect, он прекрасно работает, просто отлично, но что касается ItemSelector, я искал в коде определения и мне кажется, что во второй загрузке toField не создается, но я не знаю, как с этим справиться,

Итак, существует ли обходной путь для этого? способ заставить это работать? надеюсь, вы можете помочь мне, ребята

спасибо

Answer 1

Я просматривал форум Ext js, кто-то дал решение, я не знаю, является ли оно лучшим, но оно работает для меня,

studentStore.load(function(){
            win.down('#itemselector-field').bindStore(studentStore);
        });  

сейчас работает как я хотел

надеюсь, что это может помочь другим

Answer 2

В своем методе Forms initComponent я добавил слушатель для beforerender

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