View Full Version : (Complex) Layout in DIV

9 Apr 2010, 6:21 AM

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({
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!

9 Apr 2010, 6:41 AM
That's not complex!

And why do you think you need a Viewport?

You just need a Container.

9 Apr 2010, 7:04 AM
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({
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?