Nested Layouts

[Alberteddu]

Hi all :-)

I'm unsuccessfully trying to build different layouts inside different tabs. Here's my 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é

[jay@moduscreate.com]

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.

[Alberteddu]

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

[Alberteddu]

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

This is my code now:

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.

[Animal]

Overnesting.

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

[Alberteddu]

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

[mjlecomte]

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/