View Full Version : [Solved]Application Design - Dynamic Content

6 Nov 2009, 1:15 PM
Hi, I try to figure how do this application design:

MainPage : We load a viewport with 2 panel :

west : a list of links in a treePanel
center : TabPanel

When the use click on a item in the west panel, we create a new tab and load a the content from file (exactly like the API documentation).

The only one problem I got is : in the child file (content), I put some code (scripts), the script load perfectly but I can't figure how add the object... Exemple, if i load a new "child" viewport, I can load this one in a Window of anythink else, but I can't add this one to the child tabPanel.. so, the new viewport render under the old one...

there is the part of the code where I load the content file:

var ctl = new Ext.Panel({
frame: false,
layout: 'fit',
border: false,
autoLoad: {
url: url,
scripts: true

title: title,
closable: true,
items: [ ctl ]
Finaly, my content file look like :

<script type="text/javascript">

var viewport = new Ext.Viewport({
layout: 'border',
renderTo : this.id,
items: [
new Ext.Panel({ region: 'center', title: 'asdf' }),
new Ext.Panel({ region: 'south', title: 'WWWWW' })


<div id="header">test only</div>

I add a screenshot of the error, you will see the panel with title "WWWWW" in the south viewport!


6 Nov 2009, 2:27 PM

I forgot to say I know I can use IFrame solution, but if I do that, the user will need to reload the "ExtJS" Javascript on each request and I think that a bad solution!

Thanks for your help!


6 Nov 2009, 11:18 PM
Have a look at the LiteRemoteComponent (http://www.extjs.com/forum/showthread.php?t=18023) plugin.


title: 'Tab 1',
layout: 'fit',
plugins: new Ext.ux.Plugin.LiteRemoteComponent({
url: 'test.js'
(test.js should contain an Ext component config)

6 Nov 2009, 11:48 PM

Thanks a lot, I just found a solution with http://www.extjs.com/forum/showthread.php?t=49682

I think is the same solution!

Thanks again!