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

Threaded View

Previous Post Previous Post   Next Post Next Post
  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 2:09 PM. Reason: [OPEN] [#942]

Similar Threads

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

Tags for this Thread

Posting Permissions