Maximizing a window while using renderTo config option

**kavolorn** · 30 Jul 2010 8:07 AM

Hi everyone. I have some problems with maximizing a window. It looks like this:

tbar is hidden by window while i'm using panel.body for window.renderTo config option. Same situation is in Firefox and Chrome. Apparently it is my fault but I dont see an error.

Source code:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>ExtJS Viewport</title>
        <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8"/>
        <link rel="stylesheet" type="text/css" href="js/ext-3.2.1/resources/css/ext-all.css" />
        <script type="application/javascript" src="js/ext-3.2.1/adapter/ext/ext-base-debug.js"></script>
        <script type="application/javascript" src="js/ext-3.2.1/ext-all-debug.js"></script>
        <script type="application/javascript" src="js/ext-3.2.1/src/locale/ext-lang-ru.js"></script>
        <script type="application/javascript" src="js/ext-3.2.1/examples/ux/ux-all.js"></script>
    </head>
    <body>
        <script type="application/javascript">
            Ext.onReady(function(){
                var viewport = new Ext.Viewport({
                    renderTo    : Ext.getBody(),
                    layout      : 'border',
                    items       : [
                        {
                            region          : 'center',
                            baseCls         : 'x-plain',
                            tbar            : {
                                items   : [
                                    {
                                        text    : 'Menu',
                                        menu    : {
                                            items   : [
                                                {
                                                    text    : 'Window',
                                                    handler : function() {
                                                        (new Ext.Window({
                                                            constrain   : true,
                                                            maximizable : true,
                                                            renderTo    : viewport.layout.center.panel.body,
                                                            height      : 100,
                                                            width       : 100
                                                        })).show();
                                                    }
                                                }
                                            ]
                                        }
                                    }
                                ]
                            }
                        }
                    ]
                });
            });
        </script>
    </body>
</html>

UPD 1

The same problem exists when TabPanel is used. Window cannot be dragged onto tab. But it resizes over tab.

Source code:

Code:

Ext.onReady(function() {
    var viewport = new Ext.Viewport({
        renderTo    : Ext.getBody(),
        layout      : 'fit',
        items       : {
            xtype       : 'tabpanel',
            activeTab   : 0,
            items       : [
                {
                    title   : 'Tab 1',
                    id      : 'Tab1'
                }
            ]
        }
    });
    (new Ext.Window({
        renderTo    : Ext.getCmp('Tab1').el,
        constrain   : true,
        maximizable : true,
        height      : 100,
        width       : 100
    })).show();
});

Well, if you could help let me know. Thanks

**jay@moduscreate.com** · 2 Aug 2010 5:38 AM

kavolorn, Why are you rendering a window to a container?

**kavolorn** · 2 Aug 2010 10:26 AM

Basicly, the idea is the following. Imagine we have such UI for whole application. North region and menu are common for all tabs.

Next we want all tabs to be independent. And every window (for example filter) that is created by any inner element, must be hidden for all other tabs. Window must be constrained to tab inner side.

Well, that is the idea.

**jay@moduscreate.com** · 2 Aug 2010 10:29 AM

Why allow windows in the first place then? How do you imagine the maximize operation taking place? Taking 100% of the tab body or the browser's canvas?

**kavolorn** · 2 Aug 2010 10:50 AM

Two examples (with panel and tab panel) shows than dragging works fine (as I think right). And window is constrained correct. But when I want to maximize it I have trouble with region of operation. I expected to see window taking 100% of panel.body or tab body and it will be the same place as limits of dragging (am I wrong with that?). I see it takes over panel.tbar or tabs cards.

Maximizing a window while using renderTo config option

Thread Tools

Search Thread

Display

Maximizing a window while using renderTo config option

Maximizing a window while using renderTo config option

Similar Threads

buttons config option for Window in Ext Designer?

alwaysOnTop config option for Ext.Window

[UNKNOWN][2.x,3.0.0] autoRender config option for Ext.Window

[2.0b1][SOLVED] Panel config: assigning Toolbar config to the 'tbar' option

Ext.Window manager config option

Tags for this Thread