Ext.MessageBox - Specify the element to render over

[jbum]

Hi,

I'd like to request for a new feature that will allow the MessageBox to mask any specified element, not just the "document.body" element.

Currently, in the getDialog() function for MessageBox, it specifically calls


dlg.render(document.body);


This appears to mask the entire page and centers the message box. It would be great to have this code to take in a configurable Element.


dl.render(renderTargetElement);


It can default to the document.body element but have it configurable through a setter function or a config in Ext.Msg.show(...).

Issues:

Even with this, the message box does not seem to be centering on the configured element.

** Please see msgbox1.jpg **

I have to call the following explicitly to center it on the correct element (in this case the panel on the bottom).

** Please see msgbox2.jpg **


Ext.Msg.getDialog().getEl().center('panel-two');


Would really appreciate a feature change for this.

[mystix]

similar to this?
http://extjs.com/forum/showthread.php?t=43340

[Animal]

You should be able to simply append the Window's Element to any element you like. Set the container property to that element, and it should work.

[jbum]

For a Ext.Window object that I am creating this might work, but in the context of calling Ext.Msg.show(...), all the render(...) or appendChild(...) calls seem to be explicitly attaching the MessageBox window to document.body.

Unless I change the source code directly or overwriting the entire show function, it doesn't seem to work. Is there a better way to do this so I won't have to migrate these kind of changes in case I move to future versions of ExtJS?

[Animal]

Yes, and what I'm saying is you can move it. Good old fashioned DOM methods: http://www.w3.org/TR/DOM-Level-2-Core/ecma-script-binding.html

Two statements in the above post.


Append the Window's Element to any element you like.
Set the Window's Container property to point to that Element