PDA

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



anpegar
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.

Example:
Initial page or index.html:


<html >
<head>
<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>

<script>

Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '/resources/images/default/s.gif';
Ext.QuickTips.init();
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
</script>
</head>
<body>
</body></html>



- Code of page2.html:



<html><head>

/* It is not necessary to load the ExtJS libraries */
...
<script>

Ext.onReady(function(){
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
</script></head>
</html>



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.

anpegar
4 Oct 2010, 7:47 AM
up !!

darthwes
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.

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