Results 1 to 4 of 4

Thread: [RESOLVED] ComboBox list z-index lower than container problem

  1. #1
    Ext User
    Join Date
    Jul 2009
    Posts
    7
    Vote Rating
    0
      0  

    Default [RESOLVED] ComboBox list z-index lower than container problem

    Situation: A window contains a form panel with a combobox. It also has buttons that hide the window after a modal MsgBox appears for confirmation.

    Problem: When the window is hidden and then re-shown, the x-combo-list z-index is now lower than the windows. Thus never appears.

    This only happens when something modal appears over the window before hiding (ie msgbox or getForm.submit waitMsg). If you just hide using the window 'x', the combo-list re-appears fine.

    Code:
    var AddInfoDialog = function(config) {
    
        this.windowTitle = config.windowTitle || 'New Info';
    
        this.parentObjectId = config.parentObjectId || config.objectId || null;
    
        this.labelWidth = 120;
        this.frame = false;
        this.width = 400;
        this.defaults = { anchor: '-105' };
        this.defaultType = 'textfield';
        this.baseCls = '';
        this.bodyStyle = 'padding:5px 5px 0';
        this.method = 'POST';
    
    
        var _win = null;
    
        var _catStore = new Ext.data.JsonStore({
            fields: [{ name: 'ChildObjectId', type: 'int' }, 'ObjectName'],
            url: '/InfoBrowser.ashx',
            baseParams: { cmd: 'load-combostore', 'cmd-objectid': this.parentObjectId },
            idProperty: 'ChildObjectId',
            triggerAction: 'all',
            root: 'cats',
            totalProperty: 'totalCount',
            autoLoad: true
        });
    
        var _infoCategory = new Ext.form.ComboBox({
            store: _catStore,
            triggerAction: 'all',
            valueField: 'ChildObjectId',
            mode: 'remote',
            displayField: 'ObjectName',
            fieldLabel: 'Root Category',
            loadingText: 'Loading Info...'
        });
    
        var _InfoTitle = new Ext.form.TextField({ fieldLabel: 'Info Title', anchor: '-125', allowBlank: false, id: 'infotitle' });
       
        this.items = [
                    _infoCategory,
                    _InfoTitle
                    ];
    
        AddInfoDialog.superclass.constructor.call(this, config);
    
        this.ShowAsWin = function() {
    
            if (!_win) {
    
                _win = new Ext.Window({
                    title: this.windowTitle,
                    width: 500,
                    closeAction: 'hide',
    				items:[this],
                    modal: true,
                    buttons: [
    					{ text: 'Submit', handler: function() { _saveWin.call(this); }, scope: this },
    					{ text: 'Cancel', handler: function() { _closeWin.call(this); }, scope: this }
    				]
                });
               
            } else {
    
                _InfoTitle.setValue('');
                _infoCategory.reset();
                
            }
            _win.show(null, function() { }, this);
    
        };
    
        var _closeWin = function() {
            Ext.MessageBox.show({
                title: 'Warning',
                msg: 'Are you sure you want to close this window and lose any changes you have made?',
                buttons: Ext.MessageBox.OKCANCEL,
                fn: function(btn) {
                    if (btn == 'ok') {
                        _win.hide();
                    }
                }
            });
        };
    
        var _saveWin = function() {
            Ext.MessageBox.show({
                title: 'Warning',
                msg: 'Are you sure you want to create a new entry?',
                buttons: Ext.MessageBox.OKCANCEL,
                scope: this,
                fn: function(btn) {
                    if (btn == 'ok') {
    
                        this.getForm().submit({
                            waitMsg: 'Submitting...',
                            url: '/InfoBrowser.ashx',
                            params: { 'cmd': 'add-new-info', 'cmd-objectid': _infoCategory.getValue() },
                            success: function(form, action) {
    
                                _win.hide();
    
                            },
                            failure: function(form, action) {
                                switch (action.failureType) {
                                    case Ext.form.Action.CLIENT_INVALID:
                                        ShowErrorMsg('Form fields may not be submitted with invalid values.');
                                        break;
                                    case Ext.form.Action.CONNECT_FAILURE:
                                        ShowErrorMsg('There was a problem communicating with the server, please try again.');
                                        break;
                                    default:
                                        ShowErrorMsg(action.result.msg, null, action.result.ex);
                                }
                            },
                            scope: this
                        });
                    }
                }
            });
    
        };
    
    };
    
    Ext.extend(AddInfoDialog, Ext.form.FormPanel, {});
    I've tried doLayout before and after the _win.show(); with no success. Only other solution I can think of is to destroy the window and re-create it each time it's needed.

    A dirty hack is to just add .x-combo-list{z-index:100000 !important;} to my css but I want to avoid that.

    Any ideas?

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    132
      0  

    Default

    You could change the parent of the dropdown list to the window, e.g.
    Code:
    var _infoCategory = new Ext.form.ComboBox({
        store: _catStore,
        triggerAction: 'all',
        valueField: 'ChildObjectId',
        mode: 'remote',
        displayField: 'ObjectName',
        fieldLabel: 'Root Category',
        loadingText: 'Loading Info...',
        getListParent: function(){
            return this.ownerCt.getEl();
        }
    });

  3. #3
    Ext User
    Join Date
    Jul 2009
    Posts
    7
    Vote Rating
    0
      0  

    Default

    Thanks, that seems to have fixed it!

  4. #4
    Sencha User emredagli's Avatar
    Join Date
    Jun 2008
    Posts
    301
    Vote Rating
    2
      0  

    Default

    I have simmilar problem,
    Thanks Condor, it seems to be fixed, too..

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •