View Full Version : Panel example with 3.0

17 Feb 2010, 12:03 PM
Hello all,
is there a new example or tutorial for the panel?
I'm looking for something like:
http://www.extjs.com/learn/Tutorial:Using_Layouts_with_Ext_-_Part_1 (http://www.extjs.com/forum/../learn/Tutorial:Using_Layouts_with_Ext_-_Part_1)
but for the newest version of extJS.

Thanks so much.


17 Feb 2010, 12:31 PM
Hi Michael,

welcome to the ext-community. i would suggest to take a closer look at the examples-section. for panels and layouts, this one is quite good:


kind regards,

17 Feb 2010, 1:07 PM
If I could fit that whole thing into a div instead of the whole page it would be great.

17 Feb 2010, 1:49 PM
you can put each layout inside another container. so, this should be possible as far as i know.

kind regards,

17 Feb 2010, 1:57 PM
I went to Basic EXT Layouts and clicked on 'Border'.

I then copied the code into my js file:

var panel = new Ext.Panel({
defaults: {
collapsible: true,
split: true,
bodyStyle: 'padding:15px'
items: [{
title: 'Footer',
region: 'south',
height: 150,
minSize: 75,
maxSize: 250,
cmargins: '5 0 0 0'
title: 'Navigation',
margins: '5 0 0 0',
cmargins: '5 5 0 0',
width: 175,
minSize: 100,
maxSize: 250
title: 'Main Content',
collapsible: false,
margins: '5 0 0 0'

but nothing appeared on my page.

17 Feb 2010, 2:39 PM
your panel needs to be rendered, add :


you might want to set panel's height to see something on your page.

18 Feb 2010, 5:49 AM
I have been unable to get anything to work. I have attached some of my attempts. Ultimately, I would like to create a page that will be an email application. But, it must reside inside a div. So I cannot use viewport. I need a left nav and a right pane split in two. (you know, like an email app) I need a tool bar on the top and a tree in the nav area.

I've been working on this all week with no luck. Please take a look at my attached pages and if you can offer me some guidance.

Thank you so much for taking a look.

18 Feb 2010, 6:32 AM
hi onion,

looking into the whole code is a bit much for a free help-forum.
i still don't get the problem: you can create a panel anywhere on your site, with various layouts (shown under my first link).

if your panel / container has the right position, put another panel into it, this one with layout: viewport (for that case is also a testcase under my first link).

kind regards,

18 Feb 2010, 7:28 AM
It's only a few lines of code per page. It is not an application, but a few pages that are not connected to each other. Each page is an attempt at trying to get the panel to work. Please take a look at the view.html. It is almost working, but my two panes are not close together.

19 Feb 2010, 8:03 AM
What you probably want is a Viewport. A regular panel doesn't support multiple regions, as far as I'm aware.

A viewport however would accept your north/south/east/etc configuration in it's items, and you would put panels in each region potentially.

19 Feb 2010, 8:08 AM
As far as I know Viewport accept any type of layout.
Only BoderLayout handles regions.

no ?

19 Feb 2010, 1:31 PM

var myPanel = new Ext.Panel(
width : 400,
height : 400,
renderTo : 'myDiv',
layout : 'border',
items :
xtype : 'panel',
region : 'north',
title : 'North',
collapsible : true,
height : 100
xtype : 'panel',
region : 'south',
title : 'South',
collapsible : true,
height : 100
xtype : 'panel',
region : 'west',
title : 'West',
collapsible : true,
width : 100
xtype : 'panel',
region : 'east',
title : 'East',
collapsible : true,
width : 100
xtype : 'panel',
region : 'center',
title : 'Center'


<link rel="stylesheet" type="text/css" href="/ext-3.1.1/resources/css/ext-all.css" />
<script type="text/javascript" src="/ext-3.1.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/ext-3.1.1/ext-all-debug.js"></script>
<script type="text/javascript" src="js/div-test.js"></script>



<div id="myDiv">