[OPEN] [#942] MessageBox with renderTo configuration.

  1. #1

    [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:

    <%@ 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 3:09 PM. Reason: [OPEN] [#942]
  2. #2
    Note: the MessageBox's reconfigure method has changed at line 93.
    Last edited by RCN; Nov 24, 2015 at 6:16 PM.
  3. #3
    Hi @RCN,

    Thank you for the feature request!

    Created an Issue:
    https://github.com/extnet/Ext.NET/issues/942

    I am not sure we'll add it and when, but it looks like I've came up with a simplified override:
    Ext.window.MessageBox.override({
        render: function (el) {
            this.callParent([this.renderTo || el]);
        },
    
        reconfigure: function (cfg) {
            this.renderTo = cfg.renderTo;
            this.callParent([cfg]);
        }
    });
  4. #4
    Awesome! Thanks for this!

    At least it's better to maintain your tiny override than my solution...

Similar Threads

  1. [CLOSED] MVC - RenderTo/ApplyTo
    By thchuong in forum 2.x Premium Help
    Replies: 5
    Last Post: Sep 30, 2014, 6:23 AM
  2. [CLOSED] Window Renderto Parent
    By Kricher in forum 2.x Premium Help
    Replies: 2
    Last Post: Apr 11, 2014, 2:26 PM
  3. DesktopWindow modal renderto whole page ?
    By xtremexploit in forum 1.x Help
    Replies: 4
    Last Post: Nov 16, 2011, 7:50 PM
  4. Populate a TabPanel with AutoLoad and RenderTo
    By Tallmaris in forum 1.x Help
    Replies: 2
    Last Post: Jul 05, 2011, 11:30 AM
  5. [1.0] Panel RenderTo
    By Timothy in forum 1.x Premium Help
    Replies: 1
    Last Post: Feb 22, 2010, 11:31 PM

Tags for this Thread

Posting Permissions