PDA

View Full Version : Panel example with 3.0



TheBigOnion
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.

Michael

tobiu
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:

http://www.extjs.com/deploy/dev/examples/layout-browser/layout-browser.html

kind regards,
tobiu

TheBigOnion
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.

tobiu
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,
tobiu

TheBigOnion
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({
layout:'border',
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',
region:'west',
margins: '5 0 0 0',
cmargins: '5 5 0 0',
width: 175,
minSize: 100,
maxSize: 250
},{
title: 'Main Content',
collapsible: false,
region:'center',
margins: '5 0 0 0'
}]


but nothing appeared on my page.

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


panel.render(Ext.getBody());

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

TheBigOnion
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.

tobiu
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,
tobiu

TheBigOnion
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.

rbastic
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.

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

no ?

ckr
19 Feb 2010, 1:31 PM
javascript



Ext.BLANK_IMAGE_URL='/ext-3.1.1/resources/images/default/s.gif';
Ext.onReady(function()
{
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'
}
]
});
});


html


<html>
<head>
<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>

</head>

<body>

<div id="myDiv">
</div>
</body>

</html>