Ext JS empty ItemSelector when loaded for the second time

Question

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

Answer 1

In my Forms initComponent method I added a listener for 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);
    });
}

Answer 2

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