Results 1 to 8 of 8

Thread: Fit layout not working

  1. #1
    Ext JS Premium Member
    Join Date
    May 2008
    Posts
    44
    Vote Rating
    0
      0  

    Default Fit layout not working

    Can somebody please tell me why following panel won't expand to take 100% space in my window. I am using IE7.

    <script type="text/javascript">

    Ext.onReady(function()
    {
    var panel = new Ext.Panel({
    title: 'Fit Layout',
    layout:'fit',
    items: {
    html: '<p>This is the inner panel content</p>',
    border: true
    }
    });

    panel.render('panel-div');
    });

    </script>

    </head>

    <body>

    <div id="panel-div" style='width:100%; height:100%;background:yellow; border: 1 solid black'>

    </div>

    </body>

    </html>

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890
    Vote Rating
    89
      0  

    Default

    Use a Viewport.

  3. #3
    Ext JS Premium Member
    Join Date
    May 2008
    Posts
    44
    Vote Rating
    0
      0  

    Default Viewport

    I am using a border layout and then there is a tabbed pane in the center. I am opening an ext window in one of the tabs and then I am adding a panel(which contains a grid) to a layer on this window. If the panel is Ext.Panel then it gets added to the window but if I use a viewport then it gets added to the main body of the document and shows up behind the tabs and my window. This is the reason I am trying to use the Ext.Panel but it doesn't work.

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890
    Vote Rating
    89
      0  

    Default

    That makes no sense.

  5. #5
    Ext JS Premium Member
    Join Date
    May 2008
    Posts
    44
    Vote Rating
    0
      0  

    Default

    Is it true that Viewport always takes the entire browser space irrespective of the container? Please try the following code and you will see that inner viewport never appears, probably its hiding behind the main panel.

    <html>
    <head>
    <script type="text/javascript">
    Ext.onReady(function()
    {
    var panelMain = new Ext.Viewport({
    layout: 'border',
    items:
    [
    {
    region:'north',
    html: '<p>This is the north pane</p>',
    title:'North',
    autoScroll:true,
    border:true,
    iconCls:'nav',
    height:200
    },
    {
    region:'south',
    title:'South',
    html: '<p>This is the south pane</p>',
    border:true,
    autoScroll:true,
    iconCls:'settings',
    height:200
    },
    {
    region:'center',
    title:'Center',
    border:true,
    autoScroll:true,
    iconCls:'settings',
    items: panel
    //html: '<p>This is the Center pane</p>'
    },
    {
    region:'east',
    title:'East',
    html: '<p>This is the east pane</p>',
    border:true,
    autoScroll:true,
    iconCls:'settings',
    width:200
    },
    {
    region:'west',
    title:'West',
    html: '<p>This is the West pane</p>',
    border:true,
    autoScroll:true,
    iconCls:'settings',
    width:200
    }
    ]
    });

    var panel = new Ext.Viewport({
    title: 'Fit Layout',
    layout:'fit',
    items: {html:"This is inner viewport with fit layout"}
    });
    panelMain.render('panel-div');
    });
    </script>
    </head>
    <body>

    <div id="panel-div" style='width:50%; height:50%; background:yellow; border: 1 solid black'></div>
    </body>
    </html>

  6. #6
    Sencha User mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,061
    Vote Rating
    19
      0  

    Default

    You can only have one viewport.

    Everything else is some sort of Ext.Panel.

  7. #7
    Ext JS Premium Member
    Join Date
    May 2008
    Posts
    44
    Vote Rating
    0
      0  

    Default I need width:100% and Height:100%

    Can somebody please tell me how to size my page so that it takes whole space inside a Ext window without using a Viewport?
    Thanks.

  8. #8
    Sencha User carol.ext's Avatar
    Join Date
    Jun 2007
    Location
    Littleton, Colorado, USA
    Posts
    708
    Vote Rating
    36
      0  

    Default

    I do not see an Ext window in the code you have posted. What are you trying to put in a window and how?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •