PDA

View Full Version : [RESOLVED] ComboBox list z-index lower than container problem



wez.morris
25 Mar 2010, 4:29 AM
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.


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?

Condor
25 Mar 2010, 4:51 AM
You could change the parent of the dropdown list to the window, e.g.

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

wez.morris
25 Mar 2010, 5:43 AM
Thanks, that seems to have fixed it!

emredagli
16 Jun 2010, 11:40 PM
I have simmilar problem,
Thanks Condor, it seems to be fixed, too..