Ext 3.3 MessageBox Issues Resolved

I was doing some work using a MessageBox in Ext and ran into a couple of issues. Mainly the problem was because I am working in an infrastructure that is on Ext 3.3 and not Ext 4 (yet). Because of that I had to do some new things to add an ID to the MessageBox and also to bring the MessageBox above other elements on the page, specifically the loading mask.

Here is the code:

Ext.MessageBox.showWithId = function(dialogId, config){
 var dialog = this.getDialog();
 dialog.el.dom.id=dialogId;
 Ext.MessageBox.show(config);
}

Ext.MessageBox.showWithId('myID', {
 title : 'Progress',
 msg : 'Processing...'
 progressText : 'Initializing',
 width : 270,
 progress : true,
 closable : false,
});

//bring it above the loading mask
Ext.MessageBox.getDialog().getEl().setStyle('z-index', '50000');

//remove the showWithId function to clean up after myself
Ext.MessageBox.showWithId = undefined;

First, the ID. I needed an ID to do automated testing with Selenium, and because of that I needed a way to locate the MessageBox by an ID. In Ext 4 you can just add an ID in the show() initialization, but that is not in Ext 3.3. So basically I had to create a new function called showWithId(). This just sets an ID in the dialog and then turn around and call show().

Next, the z-index. This just brings the MessageBox to the front. 50000 might be higher than I needed, but it worked for this example.

Let me know if you have any questions