Combined fields do not display records when loading the 2nd window

Question

struggled with the problem now for a day or two. I have an Ext.Window that contains 2 combined blocks. at the first boot, everything works fine, both stores fill up, and the combo works as it should.

However, if I show the .show () window again, the combined fields do not “drop out” to display the lists. I checked Firebug and no entries are added to the combo boxes, although the stores are full.

Here is the window code:

uTransferWindow = new Ext.Window({
                id              : 'windowUserLicenseTransfer',
                title           : 'Title',
                width           : 405,
                autoScroll      : true,
                closeAction     : 'hide',
                closable        : false,
                modal           : true,
                bodyStyle       : 'background-color:#FFF',
                buttonAlign     : 'center',
                items           : new Ext.form.FormPanel({
                    labelAlign      : 'left',
                    labelWidth      : 140,
                    bodyStyle       : 'padding:10px 10px 0 10px',
                    border          : false,
                    defaults: {
                        xtype: 'ComboBox',
                        anchor: '100%',
                        tpl: '<tpl for="."><div class="x-combo-list-item"><div style="position:absolute;left:4px;">{initials}</div><div style="position:relative;left:50px;">{username}</div></div></tpl>',
                        displayField: 'username',
                        valueField: 'userid',
                        typeAhead: true,
                        mode: 'local',
                        triggerAction: 'all'
                    },
                    items: [{
                        hiddenName: 'fromuserid',
                        fieldLabel: 'From User',
                        id          : 'drop1',
                        store: userswithlicenses
                    }, {
                        hiddenName: 'touserid',
                        fieldLabel: 'To User',
                        id          : 'drop2',
                        store: userswithoutlicenses
                    }]
                }),
                buttons     : [{
                    text        : 'Transfer License',
                    handler     : function() {
                        //do stuff
                    }
                }, {
                    text: 'Cancel',
                    handler: function() { uTransferWindow.hide(); }
                }]
            }),

I could not find anyone else with a similar problem in the forums, any help would be appreciated.

UPDATE: found something small: When the window is shown, the second time around the z-index really increased. Why does the z-index increase every time a window is displayed?

Answer 1

, Ext.Window - , , new , , .

Answer 2

, z-index (firebug , ). div, z-index . , , z- , , z. , .

Ext.Window , "beforeshow" initComponent, :

    initComponent: function(){
   ... // I put the listener as the last line
   this.on("beforeshow", this.fixComboDropdowns, this);

},
/**
 * When opening multiple windows within an application, combo box list values' zIndex
 * can become out-of-sync and cause the list to not show its values.  This
 * method is to help prevent that from occurring.
 */
fixComboDropdowns: function(win){
    try{
        var zIndex = parseInt(win.getEl().getStyle("z-index"));
        // retrieve the combo boxes contained in this window.
        // call each combo boxes' getListParent() method, and set the list parent zindex.
        var combos = win.findByType("combo");
        if(combos && combos.length > 0){
            if(WINDOW_ZINDEX === 0 || WINDOW_ZINDEX < zIndex){
                WINDOW_ZINDEX = zIndex + 100;
            }
            else{
                WINDOW_ZINDEX = WINDOW_ZINDEX + 100;
            }

            for(var index = 0; index < combos.length; index = index + 1){
                // set each combo z-index style:
                var combo = combos[index];
                var listEl = combos[index].getListParent();
                if(listEl && listEl.style){
                    listEl.style.zIndex = WINDOW_ZINDEX + 10; // make sure the combo list will display.
                }
            }
        }
    }catch(ex){
        if(console){
            console.error(ex);
        }
    }
    return true;
}

, WINDOW_ZINDEX : var WINDOW_ZINDEX = 0;

, , . , : 1). , ? ?

Ext.Window, factory, Ext.Window, "beforeshow", .

factory , Ext.Window beforeShow .

Answer 3

/ , . Ext.extend,

TransferWindow = Ext.extend(Ext.Window, {
/*Lots of code*/
});

// some time later.

var uTransferWindow = new TransferWindow();
uTransferWindow.show();

I am sure that this approach will help to solve the problem you are facing, and save the html code from hidden windows.

PS You can also consider using namespaces ( Ext.namespace).