I found the solution, the problem was with the manipulation of the
mask on Jx.Dialog methods show and hide. Above are the code commented
for those methods that solve the problem:
show : function( ) {
/* prepare the dialog for display */
this.domObj.setStyles({
'display': 'block',
'visibility': 'hidden'
});
this.toolbar.update();
/* do the modal thing */
if (this.options.modal && this.options.parent.mask) {
/*check for an existing mask*/
var mask = this.options.parent.retrieve('mask');
if (!mask){
var opts = Object.merge({},this.options.maskOptions ||
{}, {
style: {
'z-index': Jx.getNumber(this.domObj.getStyle('z-
index')) - 1
},
/*origin is to check latter who was the
creator of the mask*/
origin:
this.options.id,
/*needed to refresh the origin id if there are
no more Jx.Dialogs showed*/
/* maybe another solution to this are better
but this is my first approach*/
destroyOnHide: true
});
this.options.parent.mask(opts);
}else{
/*show the current mask to resize*/
this.options.parent.mask();
}
Jx.Stack.stack(this.options.parent.get('mask').element);
}
/* stack the dialog */
this.stack();
if (this.options.closed) {
var m = this.domObj.measure(function(){
return this.getSizes(['margin'],
['top','bottom']).margin;
});
var size = this.title.getMarginBoxSize();
this.domObj.resize({height: m.top + size.height +
m.bottom});
} else {
this.domObj.resize(this.options);
}
if (this.firstShow) {
this.contentContainer.resize({forceResize: true});
this.layoutContent();
this.firstShow = false;
/* if the chrome got built before the first dialog show,
it might
* not have been properly created and we should clear it
so it
* does get built properly
*/
if (this.chrome) {
this.chrome.dispose();
this.chrome = null;
}
}
/* update or create the chrome */
this.showChrome(this.domObj);
/* put it in the right place using auto-positioning */
this.position(this.domObj, this.options.parent, this.options);
this.domObj.setStyle('visibility', 'visible');
},
/**
* Method: hide
* hide the dialog, external code should use the
<Jx.Dialog::close>
* method to hide the dialog.
*/
hide : function() {
this.domObj.setStyle('display','none');
this.unstack();
if (this.options.modal && this.options.parent.unmask) {
var element =
Jx.Stack.unstack(this.options.parent.get('mask').element);
/*check for origin option stored before and compare with the
id in the options to unmask*/
/*unmask will destroy the mask due to destroyOnHide option
of the mask = true*/
if(this.options.parent.get('mask').options.origin ==
this.options.id){
this.options.parent.unmask();
}
}
if(this.options.useKeyboard && this.keyboard != null) {
this.keyboard.deactivate();
}
},
As you can see this solution is using the id of the Jx.Dialog that is
inherit from Jx.Panel and only is setted if the user supply so I
change the code for the domObj.id of the panel a little to always have
an id in the options. Here is that code in the render method of the
Jx.Panel:
if (!
this.options.id) {
this.options.id = this.generateId();
}
this.domObj.id =
this.options.id;