how to create a panel that has a treepanel and gridpanel in a border layout

[extjsF4n]

Hi,

I want to create a Ext.panel that has a treepanel and a grid panel in a border layout. How to do so?

Can someone provide some example?

Thanks.


It's a simple question, that I believe when answered here, can help many users out there.

The manual does not have much info about this[Ext.Panel], all they have is some config options you pass to. But pass it to what?


I have a Viewport, and I want to load up a tab in the center region's tabpanel, that has this page that has a panel(w/ treepanel and gridpanel). From the examples, I see that I need to pass in a region. But I am already using region:center from the viewport to display the main tab panel. Can I still use region:center?

Basically the question is, can we have multiple region:center?

Are regions independent of the layout/window/viewport? Meaning, each instance of a window or layout have, default regions such as south,north,center etc..?

[pokerking400]

region are borderlayout defined areas. West,north,center,east,south.

You can have layout inside layout to divide anyway you want...

You start with complex.html file examples directory of extjs.

It is a viewport....

Then you add panels to each region and add what ever you want...

I added accordian...in the west...and add panelmenu ( there is an extention in the forum).

And also i add treepanel into the accordian panel...


In the center i have autogrid (another extension) --- search the forum for these extension....self explanatory...

Here is starting point of my file...ignore all specific things....

I add tabpanel...in the center and add tabs...inside...by calling getCmpl('tabpanelid').add('tabs).. <--just an example.. you have to write correct syntax


My starting page...

<script type="text/javascript">

Ext.onReady(function(){

var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({
region:'north',
el: 'north',
height:32
}),{
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,
minSize: 175,
maxSize: 400,
layout:'fit',
margins:'0 5 0 0',
items:
new Ext.TabPanel({
border:false,
activeTab:1,
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": .01,
"borderWidth": 1
}
})]
})
},{
region:'west',
id:'west-panel',
title:'West1',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
maximizable:true,
collapsible: true,
margins:'0 0 0 5',
layout:'accordion',
layoutConfig:{
animate:true
},
items: [ Ext.tree2
,

{
title: 'Settings',
html:'<p>Something useful would be in here.</p>',
autoScroll:true
},{
title: 'Even More Stuff',
html : '<p>Something useful would be in here.</p>'
},{
title: 'My Stuff',
html : '<p>Something useful would be in here.</p>'
},
Ext.panelMenu1
]
},

new Ext.TabPanel({
region:'center',
title:'test center',
deferredRender:false,
id: 'CenterTabPanel',
autoscroll:true,
enableTabScroll :true,
activeTab:0,
maximizable: true,
closabe:true,
collapsible: true,
items:[{
html:'<p>A TabPanel component can be a region.</p>',
title: 'Main Tab',
autoScroll:true
}
]
})
]
});




//Ext.util.Observable.capture(Ext.tree2, function(e){console.info(e)});
});
</script>

[extjsF4n]

Thanks porkerking!

I love your activity on the forums!