Nov 24, 2015, 1:45 PM
[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:
Thanks.
Below is the code i tried and works, but this override is ugly and very hard to maintain:
<%@ 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.
Last edited by Daniil; Nov 25, 2015 at 2:09 PM.
Reason: [OPEN] [#942]