PDA

View Full Version : Add South Panel to Center of Complex example



Zoren
3 Aug 2009, 2:44 PM
Hello Everyone,

I'm having trouble adding a south panel area to the center area of the complex layout example. Could someone help me to code this? I was able to do it from an example I built from scratch, but couldn't apply this to the complex layout example. Thanks in advance for taking the time to view my problem.

Here's the code I have working on the simple example:

// begin center area
{
region: 'center',
xtype: 'tabpanel',
activeTab: 0,
items: [{
title: 'Nested Layout',
layout: 'border',
border: false,
items: [{
region: 'south',
height: 65,
split: true,
html: 'Nested South'
},{
region: 'center',
html: 'Nested Center'
}]
},and here's the code for the complex layout where I'd like to have a south panel in the center area:


new Ext.TabPanel({
region: 'center', // a center region is ALWAYS required for border layout
deferredRender: false,
activeTab: 0, // first tab initially active
items: [{
contentEl: 'center2',
title: 'Center Panel',
autoScroll: true
},
{
contentEl: 'center1',
title: 'Close Me',
closable: true,
autoScroll: true
}



]

})]Best,

Zoren

Animal
3 Aug 2009, 9:25 PM
What do you mean?

Zoren
5 Aug 2009, 12:30 PM
Sorry I wasn't clear. I want to nest a south panel in the center panel area. I can't figure out how to add one to the complex layout example. I have attached an image. Thanks for taking the time to look at my problem.

Best,

Zoren

david l
5 Aug 2009, 6:18 PM
it depends...
whether you want the nested south panel for a particular tab or for it to be on the bottom of the tabpanel

Zoren
5 Aug 2009, 6:42 PM
Hi David,

I didn't think to differentiate the two. I would like to have on the bottom of the tabpanel. Thanks for your assistance.

Animal
5 Aug 2009, 9:24 PM
I don't understand your prob.

Configure any Panel with layout: 'border' and put items configured with region configs in as children of it.

Zoren
6 Aug 2009, 8:16 AM
Hi Animal,

I am asking for someone to help me by posting the code I would need to add a collapsible south panel within the center panel area. I am new to extjs and my attempts have been unsuccessful.

Thanks,

Zoren

Animal
6 Aug 2009, 9:44 AM
OK, we'll proceed by me guessing what you want then.

You can't add a south region.

As the API docs say, the regions of a border layout are fixed at render time.

Zoren
6 Aug 2009, 10:04 AM
Hi Animal,

Sorry to cause confusion. As I'm new to extjs and not very good with js in general, do you have some specific questions that would help you understand what I'm attempting to do? I appreciate your interest. I don't mean to be unclear. As indicated in my screenshot, I would like a box/panel area in the bottom of the center panel. I don't care how its done. I would just like to be able to place some links and images in an area below the center area. I do not wish to use the south panel that is native to the complex layout example. I want to eliminate the south panel that spans the entire layout. I found a tutorial that did things a little differently than in the complex example. I was able to add the south panel there. I cannot make this work in the complex example that comes with extjs sample pages.

here is the code that shows what I would like to do, but achieve in complex example.


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<style type="text/css">
html, body {
font:normal 12px verdana;
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}
p {
margin:5px;
}
.settings {
background-image:url(../shared/icons/fam/folder_wrench.png);
}
.nav {
background-image:url(../shared/icons/fam/folder_go.png);
}
</style>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="../form/states.js"></script>
<script type="text/javascript" src="../menu/menus.js"></script>
<link rel="stylesheet" type="text/css" href="../menus.css" />
<script type="text/javascript" src="../shared/examples.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var viewport = new Ext.Viewport({
layout: 'border',
renderTo: Ext.getBody(),
items: [{
region: 'north',
xtype: 'panel',
html: 'North'
},{
region: 'west',
xtype: 'panel',
split: true,
collapsible: true,
collapseMode: 'mini',
title: 'Some Info',
bodyStyle:'padding:5px;',
width: 200,
minSize: 200,
html: 'West'
},
// begin center area
{
region: 'center',
xtype: 'tabpanel',
activeTab: 0,
items: [{
title: 'Nested Layout',
layout: 'border',
border: false,
items: [{
region: 'south',
height: 65,
split: true,
html: 'Nested South'
},{
region: 'center',
html: 'Nested Center'
}]
},

{
title: 'Movie Grid',
html: 'Center'
},<!-- nested accordions -->
{
title: 'Movie Descriptions',
layout: 'accordion',
items: [{
title: 'Office Space',
autoLoad: 'html/1.txt'
},{
title: 'Super Troopers',
autoLoad: 'html/3.txt'
},{
title: 'American Beauty',
autoLoad: 'html/4.txt'
}]
}<!-- end nested accordion -->
]
}
// end center area
,{
region: 'east',
xtype: 'panel',
split: true,
width: 200,
html: 'East'
},]

});
//Ext.getBody();

}); //end function


</script>

</head>

<body>
</body>
</html>


Thanks,

Zoren

david l
6 Aug 2009, 12:14 PM
I used the original complex layout and editted it with the changes in red


<html>
<head>
<title>Complex Layout</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<style type="text/css">
html, body {
font:normal 12px verdana;
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}
p {
margin:5px;
}
.settings {
background-image:url(../shared/icons/fam/folder_wrench.png);
}
.nav {
background-image:url(../shared/icons/fam/folder_go.png);
}
</style>

<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

<script type="text/javascript" src="../../ext-all.js"></script>

<!-- EXAMPLES -->
<script type="text/javascript" src="../shared/examples.js"></script>

<script type="text/javascript">
Ext.onReady(function(){

// NOTE: This is an example showing simple state management. During development,
// it is generally best to disable state management as dynamically-generated ids
// can change across page loads, leading to unpredictable results. The developer
// should ensure that stable state ids are set for stateful components in real apps.
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var viewport = new Ext.Viewport({
layout: 'border',
items: [
// create instance immediately
new Ext.BoxComponent({
region: 'north',
height: 32, // give north and south regions a height
autoEl: {
tag: 'div',
html:'<p>north - generally for menus, toolbars and/or advertisements</p>'
}
}), /*{
// lazily created panel (xtype:'panel' is default)
region: 'south',
contentEl: 'south',
split: true,
height: 100,
minSize: 100,
maxSize: 200,
collapsible: true,
title: 'South',
margins: '0 0 0 0'
}, */{
region: 'east',
title: 'East Side',
collapsible: true,
split: true,
width: 225, // give east and west regions a width
minSize: 175,
maxSize: 400,
margins: '0 5 0 0',
layout: 'fit', // specify layout manager for items
items: // this TabPanel is wrapped by another Panel so the title will be applied
new Ext.TabPanel({
border: false, // already wrapped so don't add another border
activeTab: 1, // second tab initially active
tabPosition: 'bottom',
items: [{
html: '<p>A TabPanel component can be a region.</p>',
title: 'A Tab',
autoScroll: true
}, new Ext.grid.PropertyGrid({
title: 'Property Grid',
closable: true,
source: {
"(name)": "Properties Grid",
"grouping": false,
"autoFitColumns": true,
"productionQuality": false,
"created": new Date(Date.parse('10/15/2006')),
"tested": false,
"version": 0.01,
"borderWidth": 1
}
})]
})
}, {
region: 'west',
id: 'west-panel', // see Ext.getCmp() below
title: 'West',
split: true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins: '0 0 0 5',
layout: {
type: 'accordion',
animate: true
},
items: [{
contentEl: 'west',
title: 'Navigation',
border: false,
iconCls: 'nav' // see the HEAD section for style used
}, {
title: 'Settings',
html: '<p>Some settings in here.</p>',
border: false,
iconCls: 'settings'
}]
},
// in this instance the TabPanel is not wrapped by another panel
// since no title is needed, this Panel is added directly
// as a Container
{
region: 'center',
items: [
new Ext.TabPanel({
region: 'center', // a center region is ALWAYS required for border layout
deferredRender: false,
activeTab: 0, // first tab initially active
items: [{
contentEl: 'center1',
title: 'Close Me',
closable: true,
autoScroll: true
}, {
contentEl: 'center2',
title: 'Center Panel',
autoScroll: true
}]
})
,{
region: 'south',
title: 'new south',
html: 'stuff goes here'
}
]
}
]
});
// get a reference to the HTML element with id "hideit" and add a click listener to it
Ext.get("hideit").on('click', function(){
// get a reference to the Panel that was created with id = 'west-panel'
var w = Ext.getCmp('west-panel');
// expand or collapse that Panel based on its collapsed property state
w.collapsed ? w.expand() : w.collapse();
});
});
</script>
</head>
<body>
<!-- use class="x-hide-display" to prevent a brief flicker of the content -->
<div id="west" class="x-hide-display">
<p>Hi. I'm the west panel.</p>
</div>
<div id="center2" class="x-hide-display">
<a id="hideit" href="#">Toggle the west region</a>
<p>My closable attribute is set to false so you can't close me. The other center panels can be closed.</p>
<p>The center panel automatically grows to fit the remaining space in the container that isn't taken up by the border regions.</p>
<hr>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>
<p>Donec quis dui. Sed imperdiet. Nunc consequat, est eu sollicitudin gravida, mauris ligula lacinia mauris, eu porta dui nisl in velit. Nam congue, odio id auctor nonummy, augue lectus euismod nunc, in tristique turpis dolor sed urna. Donec sit amet quam eget diam fermentum pharetra. Integer tincidunt arcu ut purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla blandit malesuada odio. Nam augue. Aenean molestie sapien in mi. Suspendisse tincidunt. Pellentesque tempus dui vitae sapien. Donec aliquam ipsum sit amet pede. Sed scelerisque mi a erat. Curabitur rutrum ullamcorper risus. Maecenas et lorem ut felis dictum viverra. Fusce sem. Donec pharetra nibh sit amet sapien.</p>
<p>Aenean ut orci sed ligula consectetuer pretium. Aliquam odio. Nam pellentesque enim. Nam tincidunt condimentum nisi. Maecenas convallis luctus ligula. Donec accumsan ornare risus. Vestibulum id magna a nunc posuere laoreet. Integer iaculis leo vitae nibh. Nam vulputate, mauris vitae luctus pharetra, pede neque bibendum tellus, facilisis commodo diam nisi eget lacus. Duis consectetuer pulvinar nisi. Cras interdum ultricies sem. Nullam tristique. Suspendisse elementum purus eu nisl. Nulla facilisi. Phasellus ultricies ullamcorper lorem. Sed euismod ante vitae lacus. Nam nunc leo, congue vehicula, luctus ac, tempus non, ante. Morbi suscipit purus a nulla. Sed eu diam.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras imperdiet felis id velit. Ut non quam at sem dictum ullamcorper. Vestibulum pharetra purus sed pede. Aliquam ultrices, nunc in varius mattis, felis justo pretium magna, eget laoreet justo eros id eros. Aliquam elementum diam fringilla nulla. Praesent laoreet sapien vel metus. Cras tempus, sapien condimentum dictum dapibus, lorem augue fringilla orci, ut tincidunt eros nisi eget turpis. Nullam nunc nunc, eleifend et, dictum et, pharetra a, neque. Ut feugiat. Aliquam erat volutpat. Donec pretium odio nec felis. Phasellus sagittis lacus eget sapien. Donec est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>
<p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>
<p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>
<p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
</div>
<div id="center1" class="x-hide-display">
<p><b>Done reading me? Close me by clicking the X in the top right corner.</b></p>
<p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>
<p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>
<p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>
<p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
</div>
<div id="props-panel" class="x-hide-display" style="width:200px;height:200px;overflow:hidden;">
</div>
<div id="south" class="x-hide-display">
<p>south - generally for informational stuff, also could be for status bar</p>
</div>
</body>
</html>

Animal
6 Aug 2009, 12:25 PM
I don't know what all that code does.

The principle is that ANY Panel can have



layout: 'border',
items: [ panels here configured with region configs ]


ANY panel anywhere. SO just put that in where you need it.

Zoren
6 Aug 2009, 12:26 PM
David- Thanks very much. I really appreciate it. This is very helpful. That code does exactly what I was hoping for. Works just as I had drawn on my attachment. I think this will help others new to Ext JS as well. I hope to contribute to the community once I get a better understanding of how things work.

Animal - Thanks for your interest in my problem.