1. #1
    Sencha User kavolorn's Avatar
    Join Date
    Jun 2010
    Location
    Russia, Yaroslavl
    Posts
    11
    Vote Rating
    0
    kavolorn is on a distinguished road

      0  

    Default Maximizing a window while using renderTo config option

    Maximizing a window while using renderTo config option


    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
    Last edited by kavolorn; 1 Aug 2010 at 8:04 AM. Reason: more details

  2. #2
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


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

  3. #3
    Sencha User kavolorn's Avatar
    Join Date
    Jun 2010
    Location
    Russia, Yaroslavl
    Posts
    11
    Vote Rating
    0
    kavolorn is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    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?

  5. #5
    Sencha User kavolorn's Avatar
    Join Date
    Jun 2010
    Location
    Russia, Yaroslavl
    Posts
    11
    Vote Rating
    0
    kavolorn is on a distinguished road

      0  

    Default


    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.

Similar Threads

  1. buttons config option for Window in Ext Designer?
    By mark.wharton in forum Ext Designer: Help & Discussion
    Replies: 4
    Last Post: 13 Apr 2012, 12:26 AM
  2. alwaysOnTop config option for Ext.Window
    By fabrizim in forum Community Discussion
    Replies: 13
    Last Post: 3 Oct 2010, 9:16 PM
  3. Replies: 12
    Last Post: 3 Aug 2009, 9:30 PM
  4. Replies: 7
    Last Post: 15 Dec 2008, 9:16 AM
  5. Ext.Window manager config option
    By lcidral in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 13 Feb 2008, 4:53 PM

Thread Participants: 1

Tags for this Thread