PDA

View Full Version : How to reuse Ext lib in child pages


manugoel2003
4 May 2007, 5:03 AM
Hi all,

Here I am starting a new thread to discuss a simple technique to re-use the Ext library in the child pages instead of including them again every time.

What I am doing

Load the child page in a div. This way it has access to all the objects in the main page. The javascript in the child page should also be working. Something similar is being discussed here - http://extjs.com/forum/showthread.php?t=3975


Another alternative (discussed here - http://extjs.com/forum/showthread.php?t=1201)

Use iframes. The child javascript is nicely sandboxed, but it is fairly complex to reuse the parent library.


Here is my solution



function loadPage(url, proxy, target){
Ext.get(proxy).load(url, "", function (oElement, bSuccess, oConn, target){
if (bSuccess)
{
var html = oElement.dom.innerHTML;
Ext.get(target).update(html, true, function (){
alert("Dynamic loading completed");
});
}
else
{
alert("Failed to load Page. Please check the URL or try again later.");
}
}.createDelegate(null, [target], true));
}


I was discussing it on the above mentioned threads, but I decided not to pollute them and created its own thread instead. I have fixed a couple of issues in this version plus I have converted it in Ext 1.0.

Here are a couple of working samples

http://e11online.com/config_mgr/playpen/parent1.htm
http://e11online.com/config_mgr/playpen/parent2.htm


In the first example I am using a simple div to load 2 different kinds of child pages both of which use the Ext library - one uses simple button with a handler, the second draws a borderayout.

In the second example I am using a borderLayout as the parent page. The child pages are the same.

I have not tested the method thoroughly, so there might be some problems with it. Do let me know if you find any problem. Suggestions wud be nice too.
genius551v
4 May 2007, 5:41 AM
hey man, great job, tnks for sharing.

i m test your solutions and my result dont work full.

just a question:

i have this:


/* THIS WORK FINE*/
var idRegion = layout.getRegion("north").bodyEl.dom.id;
alert('1.idRegion:'+idRegion);
this.loadPage("index.php?action=CmdDefaultMain_header", "proxy", idRegion);

/* THIS DONT WORK */
var idRegion2 = innerLayout.getRegion("west").bodyEl.dom.id;
alert('2.idRegion:'+idRegion);
this.loadPage("index.php?action=CmdDefaultMain_menutree", "proxy", idRegion2);

my 2 child pag is: (just to do a menutree-html or body tags)


<script type="text/javascript" src="web/js/tree/main-menutree.js"></script>
<div id="main-menutree"></div>


just dont load nothing - blank pag

any sugest?

Tnks

genius551v
umlbuzzard
4 May 2007, 6:23 AM
Appears to work in FF but not in ie 7
manugoel2003
4 May 2007, 9:05 AM
genius551v: It is really hard to say anything without looking at the complete code, but try the following


Don't include any HEAD, BODY or HTML tags in the child page
Try stepping through your code in firebug and keep a watch on the data flow
Remove the class from the DIV in which you are loading the child page and then see if anything shows up
Try to avoid any "document.write" statements


If possible, please post your complete code, or better still, post a link to your application. Till that time I will try to replicate the problem.

umlbuzzard: Thanx for reporting that, but unfortunately I can't test it on IE7. Can somebody else please confirm this or provide a fix for it?


Moreover, I am more or less an amateur in this stuff, so can someone with better skills help me improve this solution?
kitepad
4 May 2007, 9:21 AM
I have run your example , it's work on FF, but is not work on IE 6.
manugoel2003
4 May 2007, 9:40 AM
Ok, I am on it.
genius551v
4 May 2007, 11:31 AM
Hi, tnks for your fast response, my complete code is the next:

PAGE1.htm


<html>
<head>
<title>test</title>

<link rel="stylesheet" type="text/css" href="web/css/ext/css/ext-all.css">

<link rel="stylesheet" type="text/css" href="web/css/test.css">

<script type="text/javascript" src="web/js/ext/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="web/js/ext/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="web/js/ext/ext-all-debug.js"></script>

<script type="text/javascript" src="web/js/view/test.js"></script>
</head>

<body>

<div id="mainTop" class="ylayout-inactive-content"></div>
<div id="mainCenter" class="ylayout-inactive-content">
<div id="btnLoadPage"></div>

<div id="btnLoadBorderLayout"></div>
<div id="dynPageContainer"></div>

<div id="proxy"></div>
</div>

</body>
</html>


PAGE2.htm


<div id="header">
<img id="my-logo" src="web/images/aplication/logos/my_logo.png">

<div id="header-title">THIS IS A TEST</div>
</div>


PAGE3.htm


<!--this is a menu tree-->
<script type="text/javascript" src="web/js/tree/main-menutree.js"></script>

<div id="main-menutree"></div>


NOTE: pag2 and page3 not have html tags <no body or html or head> they just have you look here

and my js pag1 test.js:


function loadPage(url, proxy, target){
Ext.get(proxy).load(url, "", function (oElement, bSuccess, oConn, target){
if (bSuccess)
{
var html = oElement.dom.innerHTML;
Ext.get(target).update(html, true, function (){
alert("Dynamic loading completed");
});
}
else
{
alert("Failed to load Page. Please check the URL or try again later.");
}
}.createDelegate(null, [target], true));
}

main = function(){
var layout;

return {
init : function(){
layout = new Ext.BorderLayout(document.body, {
hideOnLayout: true,
north: {
title: "North Region",
initialSize: 200,
split: true,
titlebar: true,
collapsible: true
},
center: {
title: "Center Region",
split: true,
titlebar: true
}
});
layout.beginUpdate();
layout.add('north', new Ext.ContentPanel('mainTop'));
layout.add('center', new Ext.ContentPanel('mainCenter'));
layout.endUpdate();

layout.getRegion("center").bodyEl.dom.style.padding = "10px";
var el = layout.getRegion("north").bodyEl.dom.id;

new Ext.Button("btnLoadPage", {
text: "Load a dynamic page below",
handler: loadPage.createCallback("index.php?action=CmdDefaultMain_header", "proxy", "dynPageContainer"),
minWidth: 50
});

new Ext.Button("btnLoadBorderLayout", {
text: "Load a Border Layout in the North Region",
handler: loadPage.createCallback("index.php?action=CmdDefaultMain_menutree", "proxy", el),
minWidth: 50
});
}
}
}();
Ext.onReady(main.init, main, true);

is your code man, i just change de url of pag

still dont work :((
manugoel2003
4 May 2007, 12:07 PM
It looks fine to me. I hope page2.htm is showing up properly. Try commenting out the JS include in page3.htm and put some text in its place. And if that works, that means either there is some conflicting code in your JS file, or I need to look into the JS parsing thing. I hope the former is true :)

I want to point out a few thing though

Please change the class names from "ylayout-inactive-content" to "x-layout-inactive-content". The class name has been changed in Ext 1.0.
Please remove the "body" selector from the internal CSS in "parent1.htm" and "parent2.htm" in my samples. It is causing unwanted scrolling in IE. It was just a leftover style.


I will not be able to update the samples over the weekend as I cannot update them from home. I'll try to find out the solution to your problem genius551v, but I might take longer than other people out here. Its just that I am relatively new to all this.
kitepad
4 May 2007, 8:46 PM
I have a test for IE and FF. For FF, it's work and not work for IE.

For FF, all file contents includes scripts is loaded.
For IE, only html contents is loaded, scripts is not loaded.
So, all scripts don't execute.

Any solutions for this to fix it?

Thanks.
kitepad
4 May 2007, 9:09 PM
I modified loadPage() implementation to support IE and FF.

Because using innerHTML, so I only need get all child's file contents and update it into target element.

Modified version is :

function loadPage(url, target){
Ext.lib.Ajax.request('GET',url,
{success:function(response)
{
Ext.get(target).update(response.responseText,true);
}
});
}

It's tested for IE6 and FF 2.
genius551v
5 May 2007, 7:18 AM
kitepad, i test your solutions and works very fine, tnks for sharing... =D>
genius551v
7 May 2007, 2:50 PM
kitepad, i try to do this:

1. i have a borderlayout with northRegion, westRegion and centerRegion.

2. in northRegion i have a contentPanelNorth and i "load" a pag Header (just a tamplate with a logo and title, nothing more)

3. in westRegion i have a contentPanelWest and i "load" a pag Menutree (just a template with a menutree component)

4. in the centerRegion i have a contentPanelCenter and i "load" a pag edit-grid (a template with a grid)

ok, firts time: 2.works fine, 3.works fine and 4.works fine

i work with the grid, edit and organizer, hide and show columns, and all is fine.

but if i do click a second time in the "load grid" again, the grid show wrong

any idea?

i include my code:
to load pag in any Region or panel


loadPage : function(url, panel, container){
if (Ext.get(container))
Ext.get(container).remove();

Ext.DomHelper.insertFirst(panel, {id:container}, true);

Ext.lib.Ajax.request('GET',url,
{success:function(response)
{
Ext.get(container).update(response.responseText,true) ;
}
}
);
}


to load HEADER, this works fine:

this.loadPage('index.php?action=CmdDefaultMain_header', 'contentPanelNorth', 'containerNorth');

HEADER pag (header.html): no html tags(body or head)

<div id="header">
<img id="logo-bimbi" src="web/images/aplication/logos/logo.png">

<div id="header-title">TITLE HERE</div>
</div>


to load a Menutree:


onButtonClick : function(btn){
Ext.message.msg('Button Click','You clicked the "{0}" button.', btn.text);
Main_Viewer.loadPage('index.php?action=CmdDefaultMain_menutree', 'contentPanelWest', 'containerWest');
},


menutree pag (menutree.html): no html tags(body or head)

<script type="text/javascript" src="web/js/tree/main-menutree.js"></script>

<div id="main-menutree"></div>

to load the grid in center:

Main.loadPage(node.attributes.url,'contentPanelCenter','containerCenter');

grid pag (grid_editor.html): no html tags(body or head)

<script language="JavaScript" src="web/js/grids/grid.js"></script>

<div id="mygrid" style="border:1px solid #99bbe8; overflow:hidden; height:300px;"></div>

<form id="updategrid"></form>

can you (or anybody) helpme with that please?

and a fews pictures:
manugoel2003
8 May 2007, 2:49 AM
Current problems in my implementation
1. Child CSS and JS not loading in IE 6 and IE 7
2. Linked CSS and JS in the child page is not loading

Kitepad, your solution is not working in certain scenarios. Like in my Example 2, if you load the child with borderLayout first and then load the other child, the button is misplaced in IE. However, I have to click on the button many times successively to replicate the same issue in FF. I dont know why this is happening. Moreover, the Child CSS is not loading.

I found another piece of code by Animal here, it has the same set of problems.
http://extjs.com/forum/showthread.php?p=28632#post28412

Edit: I am not facing the problem of misplaced buttons in my implementation. I'll post the links to samples of all the implementations shortly.

I found another work by umlbuzzard here, I have yet not tested it thorougly.
http://extjs.com/forum/showthread.php?t=5725#post28480

I am still figuring out a simple way to make it work in all browsers and be able to load the CSS as well. Would be nice if linked JS and CSS in the child page could be loaded too.

Let me know if you make any further progress.
kitepad
8 May 2007, 5:09 AM
manugoel2003,

I have fixed same problem for your sample2, I think it have same div id for "mybutton" in your sample, you can chang your id with unique name, for instance, change as 'mybutton1' in child1.htm, ''mybutton2' in child2.htm.
Because in this solution, all scripts is running in one page actually.

Edit: For your example that post in http://e11online.com/config_mgr/playpen/ is not work for ie6, only work on FF 2 in my machine. For my implementation and Animal's solution, tested is ok in IE and FF.
And for Animal's solution is ok if you ensure your id is unique in all scripts.


genius551v:

Do you have a minimal samples to demonstrate your problem?
And from my view, loadPage should be call only once, that's mean you should add some control logic to show your grid after grid have loaded.
genius551v
8 May 2007, 9:36 PM
kitepad,


genius551v:
Do you have a minimal samples to demonstrate your problem?

>>here<< (http://www.cadenatextilconfeccion.org/genius551v/bimbi_desarrollo-1.0-Alpha4-Ext-1.0/ASAP/applications/bimbi/)
kitepad
8 May 2007, 10:38 PM
Hi,

I tested your sample, I cann't get any tree item in your west panel.
If I click second button in your west panel's toolbar, a grid is loaded in center panel, repeat any times, display always is correct.

My os is winxp english version with sp2 and ie is IE 6.
manugoel2003
8 May 2007, 11:17 PM
Kitepad: thanx for the pointer, I have corrected that

Genius551v: I have also tested your example. It seems that there is a FATAL error in your PHP file in the case of the tree. Because of which the tree is not loading at all. The grid is loading perfectly even when it is loaded many times. I have tested on Firefox 2.0.0.3 and IE 6.



<br />

<b>Warning</b>: main(../../../lib/json/json.php) [<a href='function.main'>function.main</a>]: failed

to open stream: No such file or directory in <b>/home/mac/public_html/genius551v/bimbi_desarrollo-1

.0-Alpha4-Ext-1.0/ASAP/applications/bimbi/domain/MenuTreeManager.php</b> on line <b>4</b><br />

<br />

<b>Fatal error</b>: main() [<a href='function.require'>function.require</a>]: Failed opening required

'../../../lib/json/json.php' (include_path='.:/usr/lib/php:/usr/local/lib/php:/home/mac/public_html

/genius551v/bimbi_desarrollo-1.0-Alpha4-Ext-1.0/ASAP/applications/bimbi/config/../../../system/classes

:/home/mac/public_html/genius551v/bimbi_desarrollo-1.0-Alpha4-Ext-1.0/ASAP/applications/bimbi/config

/../.:/home/mac/public_html/genius551v/bimbi_desarrollo-1.0-Alpha4-Ext-1.0/ASAP/applications/bimbi/config

/../php/classes:/home/mac/public_html/genius551v/bimbi_desarrollo-1.0-Alpha4-Ext-1.0/ASAP/applications

/bimbi/config/../../../lib:/home/mac/public_html/genius551v/bimbi_desarrollo-1.0-Alpha4-Ext-1.0/ASAP

/applications/bimbi/config/../../../lib/Smarty-2.6.0/libs:/home/mac/public_html/genius551v/bimbi_desarrollo-1

.0-Alpha4-Ext-1.0/ASAP/applications/bimbi/config/../../../lib/DataType') in <b>/home/mac/public_html

/genius551v/bimbi_desarrollo-1.0-Alpha4-Ext-1.0/ASAP/applications/bimbi/domain/MenuTreeManager.php</b

> on line <b>4</b><br />
genius551v
9 May 2007, 6:45 AM
Hi,

I tested your sample, I cann't get any tree item in your west panel.
If I click second button in your west panel's toolbar, a grid is loaded in center panel, repeat any times, display always is correct.

My os is winxp english version with sp2 and ie is IE 6.

hi, tnks for test my example, i mean when:
1. rigth click in the header grid,
2. hide a column (for example "description")
3. and re-load the grid,

now the grid show wrong

PD. i going to fix the error of the menutree
kitepad
10 May 2007, 8:24 AM
Hi,

You can modify your buildGrid function as following to fix this problem:

function buildGrid() {
var c = Ext.get('mygrid');
var id = Ext.id();
c.createChild({tag:'div',id:id});
grid = new Ext.grid.Grid(
id,
{
ds: ds,
cm: getColumnModel(),
autoSizeColumns: true
}
);
}
genius551v
11 May 2007, 4:51 PM
kitepad,
each time create a new div and new grid ? what is up with the previous grid or div ?
cayenne_08
16 Jun 2011, 9:32 AM
Do you have an equivalent solution for ExtJS4?

Thanks!