Modal Jx.Dialog Bug

[aek]

Steps to reproduce the bug:
1- Declare a modal Jx.Dialog with content, could be a panel with toolbars buttons
2- Declare another modal Jx.Dialog to be build and showed by any of the buttons or any other trigger method to show the Dialog
3- Run the example showing the two Dialogs

Expected result:
When the second Dialog get closed the first one remains modal

Obtained result
When the second Dialog get closed the first loose the modal part

Caused by the use of Mask

I'm still without a solution to this so if someone know how to fix this issue it would be great.

[aek]

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;