PDA

View Full Version : I need Windows with Layouts to be rendered to particular div in a table



sivaprasad
26 Feb 2010, 3:06 AM
Hi all,

Please help regarding the below issue.

Here in onclick button event was invoked - http://www.extjs.com/deploy/dev/examples/window/layout.html

The window was shown as dialog box but I need Windows with Layouts to be rendered to particular div(example - mainLayout)

Not LIKE THIS - win.show(this);

I NEED LIKE THIS (the window layout to be rendered to the div with page onload) :

<table>
<tr><td>HEADER</td></tr>
<tr><td>SOME CONTENT</td></tr>
<tr><td><div id="mainLayout"></div> <!-- Here the layout to be rendered (setted) --> </td></tr>
<tr><td>FOOTER</td></tr>
</table>

Thanks in advance,
sivaprasad

picofaradpjf
26 Feb 2010, 10:08 AM
I believe what you'd want to do is replace Ext.Window with Ext.Panel

Modified code from the example you linked to:


Ext.onReady(function(){

// tabs for the center
var tabs = new Ext.TabPanel({
region: 'center',
margins:'3 3 3 0',
activeTab: 0,
defaults:{autoScroll:true},

items:[{
title: 'Bogus Tab',
html: 'panel 1'
},{
title: 'Another Tab',
html: 'panel 2'
},{
title: 'Closable Tab',
html: 'panel 3',
closable:true
}]
});

// Panel for the west
var nav = new Ext.Panel({
title: 'Navigation',
region: 'west',
split: true,
width: 200,
collapsible: true,
margins:'3 0 3 3',
cmargins:'3 3 3 3'
});

var win = new Ext.Panel({
renderTo: 'mainLayout',
width: 700,
height: 500,
title: 'Border Layout',
layout: 'border',
items: [nav, tabs]
});

});