(Complex) Layout in DIV

[fabsen2102]

Hi!

I'm absolutely new to extjs.

I want to include a "complex" Layout within a DIV. So the Layout should have two regions (west and center). The west-DIV should be collapsible.

As I understood it is only possible with a viewport. But how to include a Viewport within a panel. Cause I read that a viewport is always for the whole browser-window.

At the moment I've got the following code:

Simple = function() {
            return {
                init : function() {
                    new Ext.Panel({
                    applyTo:'ticketDetails',
                    items: [{
                            region: 'west',
                            collapsible: true,
                            title: 'Navigation',
                            width: 200
                            // the west region might typically utilize a TreePanel or a Panel with Accordion layout
                        }, {
                            region: 'center',
                            xtype: 'tabpanel', // TabPanel itself has no title
                            items: {
                                title: 'Default Tab',
                                html: 'The first tab\'s content. Others may be added dynamically'
                            }
                        }
                    ]
                });
                }
            };
        }();
        Ext.EventManager.onDocumentReady(Simple.init, Simple, true);

But thats not want I really want

Thanks for your help!

[Animal]

That's not complex!

And why do you think you need a Viewport?

You just need a Container.

[fabsen2102]

OK, I'm sorry. I thought so because I read I need to

Could you please help me a little.
I need to add a container first and then !??? - two Items directly in the container or first two panels?

With the following code I get two DIVs but without a chance to collapse..

new Ext.Container({
                        applyTo:'ticketDetails',
                        autoEl: 'div',  // This is the default
                        layout: 'column',
                        defaults: {
                            // implicitly create Container by specifying xtype
                            xtype: 'container',
                            autoEl: 'div', // This is the default.
                            layout: 'form',
                            columnWidth: 0.5,
                            style: {
                                padding: '5px'
                            }
                        },
                        items: [{
                            items: {
                                collapsible: true,
                                title: 'Left Side',
                                name: 'leftside',
                                html: 'The first tab'
                            }
                        }, {
                            items: {
                                title: 'Default Tab',
                                name: 'rightside',
                                html: 'The second tab'
                            }
                        }]
                    });

I can't add a layout border.. how does it work?