В комбинированных полях не отображаются записи при второй загрузке окна

Question

боролся с проблемой в течение дня или двух. У меня есть Ext.Window, которое содержит 2 поля со списком. при первой загрузке все работает нормально, оба магазина заполнены и комбо работает как надо.

Однако, если я .show () окно во второй раз, поля со списком не "раскрываются" для отображения списков. Я проверил Firebug, и в поля со списком не добавляются записи, хотя магазины заполнены.

Вот код окна:

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(); }
                }]
            }),

Я не смог найти никого другого с подобной проблемой на форумах, любая помощь будет признательна.

ОБНОВЛЕНИЕ: обнаружил что-то маленькое, хотя: Когда окно отображается во второй раз, z-индекс действительно увеличился. Почему z-индекс будет увеличиваться при каждом отображении окна?

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's 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's 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's list will display.
                }
            }
        }
    }catch(ex){
        if(console){
            console.error(ex);
        }
    }
    return true;
}

О, не забудьте определить глобальную переменную WINDOW_ZINDEX следующим образом: var WINDOW_ZINDEX = 0;

Я уверен, что приведенный выше код можно уточнить, но вы поймете общую идею. Некоторые вещи, которые я не смог проверить: 1). Что если всплывающее окно устанавливает фокус на поле? Вышесказанное удаляет этот фокус?

Если у вас нет переопределения для Ext.Window, рассмотрите возможность использования фабричного шаблона, в котором вы можете создать Ext.Window, а затем поместить слушатель «beforeshow» на него, прежде чем возвращать его вызывающей стороне.

Если фабричный шаблон не является опцией, подумайте о том, чтобы поместить перехватчик в метод beforeShow Ext.Window или переопределить его.

Answer 3

Вам лучше не показывать / скрывать окно, а создавать новое и закрывать его при необходимости. Это может быть достигнуто с помощью Ext.extend, например

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

// some time later.

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

Я уверен, что этот подход поможет решить проблему, с которой вы столкнулись, и сохранит HTML-код от сохранения скрытых окон.

P.S. Вы также можете рассмотреть возможность использования пространств имен (Ext.namespace).