View Full Version : Load components in container body of window.

3 Oct 2010, 11:10 PM
Hi, i have the following question:

I have two html pages, in the first page i create a window with the autoLoad propertie have a link to the second page html. In the second page i have a code for create a component panel, well, how to load the component panel in the body of window?

I want to do it this way because i just want to the component when displaying it. I'm building a big application and i do not want to load all components into a single page html. I have several html pages and upload components within each other.

Initial page or index.html:

<html >
<meta http-equiv='content-type' content='text/html; charset=UTF-8' />
<link rel='stylesheet' type='text/css' href='/resources/css/ext-all-notheme.css' />
<link rel='stylesheet' type='text/css' href='/resources/css/xtheme-blue.css' />

<script type='text/javascript' src='/adapter/ext/ext-base.js' ></script>
<script type='text/javascript' src='/ext-all.js' ></script>
<script type='text/javascript' src='/src/locale/ext-lang-es.js' ></script>


Ext.BLANK_IMAGE_URL = '/resources/images/default/s.gif';
Ext.Ajax.disableCaching = false;

var myWin = new Ext.Window({
layout: 'auto',
width: 700,
renerTo: Ext.getBody(),
bodyCfg: {style: 'background-color:#ffffff', bodyBorder: true},
draggable: false,
maximizable: true,
closeAction: 'hide',
resizable: false,
autoScroll: false,
autoHeight: true,
padding: 5,
autoLoad: 'http://mydomain/page2.html' /* in the page2.html i have the panel component. I want to load in the body of window */


}); //end onReady

- Code of page2.html:


/* It is not necessary to load the ExtJS libraries */

var p1 = new Ext.Panel({
title: 'Test Panel 2',
html: '<b>Body of panel 2.</b>',
applyTo: 'ext-gen358' /* ext-gen358 is the id of the body of the window, but I not put the panel is not loaded into the body of the window, as I should? */

}); //end onReady

Note: I do not want to use the plugin Ext.ux.Plugin.RemoteComponent because my html page is generated dynamically from a database through xslt templates. The page can contain 1 .. N components.

Thanks advanced.

4 Oct 2010, 7:47 AM
up !!

4 Oct 2010, 8:31 AM
Look here at post # 5 (http://www.sencha.com/forum/showthread.php?102508-tabs-w-dynamic-grids&p=480781#post480781). The best way to do this whole thing is to make a page2.js that declares a function that returns a panel. Include the js file and call the function to generate the panel inline on page1.

4 Oct 2010, 8:51 AM
Darthwe, thanks for your response, is just what I wanted.