Results 1 to 6 of 6

Thread: Layout Panel

  1. #1
    Ext User
    Join Date
    Oct 2010
    Posts
    6

    Default Layout Panel

    Hi, all!

    I have this code:
    Code:
    Ext.onReady(function(){
            Ext.QuickTips.init();
            var headpanel=new Ext.Panel({
                          region: 'north',
                          html: 'some html'
                        });
                var startcont = new Ext.Panel({
                          html: 'welcome'
                        });    
    
               aaa = new Ext.Panel({
                  layout: 'fit',
                  title: 'welcome',
                  id:'maincont1',
                  region: 'center',
                  items: [startcont] 
                                });
            maincont = new Ext.Panel({
                          region: 'center',
                          layout: 'fit',
                          items:  [aaa]
                        });    
                        
            mainviewport= new Ext.Viewport({
                                layout: 'border',
                                 items: [headpanel,maincont]});
    });
    All fine, all display normal.

    But when i write this code:

    Code:
    Ext.onReady(function(){
            Ext.QuickTips.init();
            var headpanel=new Ext.Panel({
                          region: 'center',
                          html: 'some html'
                        });
                var startcont = new Ext.Panel({
                          html: 'welcome'
                        });    
    
               aaa = new Ext.Panel({
                  layout: 'fit',
                  title: 'welcome',
                  id:'maincont1',
                  region: 'center',
                  items: [startcont] 
                                });
            maincont = new Ext.Panel({
                          region: 'south',
                          layout: 'fit',
                          items:  [aaa]
                        });    
                        
            mainviewport= new Ext.Viewport({
                                layout: 'border',
                                 items: [headpanel,maincont]});
    });
    , then phrase 'welcome' not displayed.

    Why? What reason? What need change to correct work?

    Tnx, sorry for my english.

  2. #2
    Ext JS Premium Member troseberry's Avatar
    Join Date
    Feb 2010
    Location
    Dayton, OH
    Posts
    277

    Default

    Well there are overnesting problems. Perhaps you can explain what the end result should look like and then we can help you write a better looking piece of code. There are layout problems and region problems and differences between the 2 piece of code you show.

  3. #3
    Ext User
    Join Date
    Oct 2010
    Posts
    6

    Default

    I think, what result of second code must be equal to result of the first code.
    Because in first example we have region north&center, and in second - center&south. Other part of both example are equal.

    I are wrong?

  4. #4
    Ext JS Premium Member troseberry's Avatar
    Join Date
    Feb 2010
    Location
    Dayton, OH
    Posts
    277

    Default

    So you want a viewport with a center region and a south region? Why did you choose a border layout if all you need is the two regions? Would a hbox layout work better?

    Yes the code differences between the two are you switch the regions around. If the first worked and showed you what you want then why did you change? I am just trying to understand what you need here. You can also clean up your code by getting rid of the panel in a panel in a panel type of thing. Just add the needed pieces directly to the first panel. There is no sense in using embedded panels like this.

  5. #5
    Ext User
    Join Date
    Oct 2010
    Posts
    6

    Default

    This code are part of application. Maincont is main panel, content of maincont often change ( maincont.remove(...) and maincont.add(...) ). Code of change are universal for whole application...
    Such reason for use embedded panels.

    I want make maincont not a "center" region.

  6. #6
    Ext JS Premium Member troseberry's Avatar
    Join Date
    Feb 2010
    Location
    Dayton, OH
    Posts
    277

    Default

    Well the problem is that the way your second bit of code is that the center panel is now not the main conent and by definition the center panel will automatically resize itself to fill the unused space and because your south region has no height it will always be rendered out of view. Try adding a height to the south.

    However I would rethink this layout. You typically would put your main type of content in a center panel like you did in the first code.

Similar Threads

  1. (Window+TabPanel+Panel+layout=border)layout will disorder when restore IE
    By qgj2046 in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 15 Apr 2009, 6:19 PM
  2. Creating Layout Inside Tab Panel with Grids and Images in Regions of Layout
    By mrkevans in forum Ext 2.x: Help & Discussion
    Replies: 7
    Last Post: 15 Oct 2008, 8:16 AM
  3. How to correctly layout a Tree and Grid in Complex Layout center panel
    By ollyando in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 2 Nov 2007, 11:24 AM
  4. Replies: 4
    Last Post: 23 Oct 2007, 8:29 PM

Posting Permissions

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