1. #1
    Ext User
    Join Date
    Apr 2009
    Posts
    7
    Vote Rating
    0
    Alberteddu is on a distinguished road

      0  

    Default Nested Layouts

    Nested Layouts


    Hi all :-)

    I'm unsuccessfully trying to build different layouts inside different tabs. Here's my code:

    Code:
    var viewport = new Ext.Viewport({
                    layout:'border',
                    items: [
                    
                        {
                            region:'center',
                            items: [
                                // Here I would like to have a different layout per tab
                           ]
    
                        }
    
                    
                    ]
            });
    I'm a newbie with Ext, tried to learn with examples or api but can't understand the way to do that.

    Any help would be appreciated. Thank you

    Albé

  2. #2
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    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


    Albe, you might benefit from watching screencast #005 - 010 see http://tdg-i.com/category/extjs/ext-...pt-screencasts

    ... which goes over the container basics and many of the layouts.

    If you're only going to use a single item which is to be stretched in the viewport, setup the viewport's layout to fit, and allow it to have one child.

  3. #3
    Ext User
    Join Date
    Apr 2009
    Posts
    7
    Vote Rating
    0
    Alberteddu is on a distinguished road

      0  

    Default


    I'll check it out. Thank you... again.

  4. #4
    Ext User
    Join Date
    Apr 2009
    Posts
    7
    Vote Rating
    0
    Alberteddu is on a distinguished road

      0  

    Default


    Quote Originally Posted by Alberteddu View Post
    I'll check it out. Thank you... again.
    This is my code now:

    Code:
    new Ext.Viewport({
            
            layout        : 'border',
            defaults    : {
                height: '100',
                width:    '100',
                resizable: true
            },
            
            items        : [
            {
                region:    'center',
                items: [
                    new Ext.TabPanel({
                        activeTab:0,
                        items:[{
                            title: 'Client',
                            autoScroll:true,
                            items: [
                            
                            new Ext.Panel({
                                layout:'border',
                                width: '100%',
                                defaults: {
                                    split: true
                                },
                                items: [{
                                    region: 'south',
                                    height: 100,
                                    minSize: 75,
                                    maxSize: 250,
                                },{
                                    region:'east',
                                    width: 200,
                                    minSize: 100,
                                    maxSize: 300
                                },{
                                    region:'center',
                                }]
                            })
                            
                            ]
                        },{
                            title: 'Center Panel',
                            autoScroll:true
                        }]
                    })
                 ]
            }
            
            ]
            
        })
    It seems to work. I did follow the screencast but I think there's still something which is not going well there.

    For example, is there a way to tell the layout in first tab "please stretch yourself until you reach the end of the page"? I mean, his height is still 0. It changes just when I set an absolute value.

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,507
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Overnesting.

    Think. WHy wrap so deep? JUst forum search "overnesting" I'm not going through this again.

  6. #6
    Ext User
    Join Date
    Apr 2009
    Posts
    7
    Vote Rating
    0
    Alberteddu is on a distinguished road

      0  

    Default


    Oh yeah, there is the keyword.
    I'm sorry, being an Italian in this occasion did not help me finding the right word. So, thank you very much for the suggestion

  7. #7
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    6
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    Quote Originally Posted by Alberteddu View Post
    Oh yeah, there is the keyword.
    I'm sorry, being an Italian in this occasion did not help me finding the right word. So, thank you very much for the suggestion
    A tad ironic with the title of your thread being "Nested Layouts". This is a common recurring problem. If you can recall, please indicate where you looked in the docs to resolve the problem. If we know this maybe the appropriate link to the approriate information can be left, people still are not finding it.

    Take a look at the Ext 3 docs, they are in constant development:
    http://extjs.com/deploy/ext-3.0-rc1/docs/