[OPEN] [#942] MessageBox with renderTo configuration.
The MessageBox component has some very useful funcionalities, especially when you just need to show some text message and buttons quickly. However the messagebox can't be rendered to a specific element like panel, in other words, it just can belongs to document body. I think it is more easy to fix this problem in message box than create a new window component with all behaviors of messagebox.
Below is the code i tried and works, but this override is ugly and very hard to maintain:
HTML Code:
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<!DOCTYPE html>
<html>
<head runat="server">
<script type="text/javascript">
var onClick = function () {
var caixaDeMensagem = new Ext.window.MessageBox();
caixaDeMensagem.show({
renderTo: Ext.net.getEl(App._pnlCenter),
title: "Title",
message: "Message",
buttons: Ext.Msg.OK,
height: 100,
width: 200,
constrain: true
});
};
Ext.window.MessageBox.override({
reconfigure: function (cfg) {
var me = this,
buttons = 0,
hideToolbar = true,
oldButtonText = me.buttonText,
resizer = me.resizer,
header = me.header,
headerCfg = header && !header.isHeader,
message = cfg && (cfg.message || cfg.msg),
resizeTracker, width, height, i, textArea, textField, msg, progressBar, msgButtons;
me.updateButtonText();
me.cfg = cfg = cfg || {};
if (cfg.width) {
width = cfg.width;
}
if (cfg.height) {
height = cfg.height;
}
me.minWidth = cfg.minWidth || me.defaultMinWidth;
me.maxWidth = cfg.maxWidth || me.defaultMaxWidth;
me.minHeight = cfg.minHeight || me.defaultMinHeight;
me.maxHeight = cfg.maxHeight || me.defaultMaxHeight;
if (resizer) {
resizeTracker = resizer.resizeTracker;
resizer.minWidth = resizeTracker.minWidth = me.minWidth;
resizer.maxWidth = resizeTracker.maxWidth = me.maxWidth;
resizer.minHeight = resizeTracker.minHeight = me.minHeight;
resizer.maxHeight = resizeTracker.maxHeight = me.maxHeight;
}
delete me.defaultFocus;
if (cfg.defaultFocus) {
me.defaultFocus = cfg.defaultFocus;
}
me.animateTarget = cfg.animateTarget || undefined;
me.modal = cfg.modal !== false;
me.setTitle(cfg.title || (headerCfg && header.title) || me.title);
me.setIconCls(cfg.iconCls || (headerCfg && header.iconCls) || me.iconCls);
if (Ext.isObject(cfg.buttons)) {
me.buttonText = cfg.buttons;
buttons = 0;
} else {
me.buttonText = cfg.buttonText || me.buttonText;
buttons = Ext.isNumber(cfg.buttons) ? cfg.buttons : 0;
}
buttons = buttons | me.updateButtonText();
me.buttonText = oldButtonText;
Ext.suspendLayouts();
me.width = me.height = null;
if (width || height) {
if (width) {
me.setWidth(width);
}
if (height) {
me.setHeight(height);
}
}
me.hidden = false;
if (!me.rendered) {
me.render(cfg.renderTo || Ext.getBody());
}
me.closable = cfg.closable !== false && !cfg.wait;
header = me.header;
if (header) {
header.child('[type=close]').setVisible(me.closable);
if (!cfg.title && !me.closable && !cfg.iconCls) {
header.hide();
} else {
header.show();
}
}
me.liveDrag = !cfg.proxyDrag;
me.userCallback = Ext.Function.bindCallback(cfg.callback || cfg.fn || Ext.emptyFn, cfg.scope || Ext.global);
me.setIcon(cfg.icon);
msg = me.msg;
if (message) {
msg.setHtml(message);
msg.show();
} else {
msg.hide();
}
textArea = me.textArea;
textField = me.textField;
if (cfg.prompt || cfg.multiline) {
me.multiline = cfg.multiline;
if (cfg.multiline) {
textArea.setValue(cfg.value);
textArea.setHeight(cfg.defaultTextHeight || me.defaultTextHeight);
textArea.show();
textField.hide();
me.defaultFocus = textArea;
} else {
textField.setValue(cfg.value);
textArea.hide();
textField.show();
me.defaultFocus = textField;
}
} else {
textArea.hide();
textField.hide();
}
progressBar = me.progressBar;
if (cfg.progress || cfg.wait) {
progressBar.show();
me.updateProgress(0, cfg.progressText);
if (cfg.wait === true) {
progressBar.wait(cfg.waitConfig);
}
} else {
progressBar.hide();
}
msgButtons = me.msgButtons;
for (i = 0; i < 4; i++) {
if (buttons & Math.pow(2, i)) {
if (!me.defaultFocus) {
me.defaultFocus = msgButtons[i];
}
msgButtons[i].show();
hideToolbar = false;
} else {
msgButtons[i].hide();
}
}
if (hideToolbar) {
me.bottomTb.hide();
} else {
me.bottomTb.show();
}
Ext.resumeLayouts(true);
}
});
</script>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:Viewport Layout="BorderLayout" runat="server">
<Items>
<ext:Panel runat="server" ID="_pnlNorth" Region="North" Height="100">
</ext:Panel>
<ext:Panel runat="server" ID="_pnlWest" Region="West" Width="200">
</ext:Panel>
<ext:Panel runat="server" ID="_pnlCenter" Region="Center">
<Items>
<ext:Button runat="server" Text="Show Window" Handler="onClick" />
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</body>
</html>
Do you guys can provide a solution for this case builtin in Ext.net?
Thanks.
