Embedding Ext code is page fragment [Archive]

View Full Version : Embedding Ext code is page fragment

marceloverdijk

19 May 2007, 11:46 PM

I'm having a borderlayout with a West panel (containing navigation links), a North panel, and a Center Panel.

I'm using a general js file to setup the above layout and it's initialized with the onReady call.
The Center panel displays the current page and can contain various things.
For now I'm embedding the specific js code for the page itself in the page.

But how should I init the code? Add another onReady event in this embedded <script> tag?

This would mean I have 2 onReady events. Is this a good habit?
Or should I take another approach?

Cheers,
Marcel

jsakalos

20 May 2007, 1:39 AM

Not direct answer but viewpoint:

Iframe is another, to some degree, independent browser window so everything what applies to your main page applies also to page loaded in iframe.

Good idea is to share once loaded Ext between main page and iframe. For that put something like this to your code:

iframe.window.Ext = Ext

You still need to include css and themes in the child page.

You can address global variables in iframe through iframe.window object.

marceloverdijk

20 May 2007, 2:43 AM

But is a good practice to have multiple call to Ext.onReady on a page?

E.g.

<script>
Ext.onReady(function() { alert("Congratulations! You have Ext configured correctly!");});
</script>
<script>
Ext.onReady(function() { alert("Congratulations! You have Ext configured correctly!");});
</script>

Think the above example as 2 grids to be rendered on 1 page.

Why I'am doing this is because I'm alo experimenting with GroovySP (similar like JSP) tags to render a grid based on some parameters provided.

Should i be carefull with mulitple calls to onReady?

The above exmaple had 2 calls, but somewhere in the head I also setup general layout of the page (making it actually 3 calls)

Cheers,
Marcel

Animal

20 May 2007, 3:27 AM

But is a good practice to have multiple call to Ext.onReady on a page?

No.

onReady is only relevant for the first page load.

After that, it will fire immediately, so is redundant.

Loading page fragments into ContentPanels through "Ajax" does not require that embedded scripts be kicked off in an onReady function. They are evaluated only after the fragment has been fully rendered.

20 May 2007, 3:27 AM

Ext.onReady() is actually a shortcut to Ext.EventManager.onDocumentReady in the EventManager every Event can have multiple listener - so there is no problem in having multiple calls to Ext.onReady() because they just add another lisener to the ondocumentready event. 1, 2, 3, or 100 calls to Ext.onReady - does not make any difference.

But be aware of the following: as far as i know Ext does not defines an order between the liseners. The current behaviour (the lisener that was registered first gets called first) is not guaranteed to be the behaviour of future Ext versions.

marceloverdijk

20 May 2007, 4:52 AM

@Animal

Not really related to Ext but more to Javascript:
Is the onReady executed before any script in a fragment.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>


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


<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="../resources/css/ytheme-aero.css">
<link rel="stylesheet" type="text/css" href="ExtStart.css">
</head>
<body>
<div id="content">
<p>Welcome to ResumeManager.</p>
</div>
<script>
Ext.MessageBox.show({
title: 'Hello2',
msg: 'Hello2',
width:400,
buttons: Ext.MessageBox.OK
});
</script>
</body>
</html>

In ExtStart.js I have an onReady event which does some layouting.

In the html I have <script> tag which now contains a message (but this would be a grid; simplified it for the example.

Is this a good approach?

Cheers,
Marcel

Animal

20 May 2007, 11:50 PM

Several points.

A fragment is not an HTML document. No DOCTYPE is needed, no <html>, no <head> and no <body>.

It's just put into the innerHTML of an existing element, so these tags are redundant.

Embedded scripts are processed in the order in which they occur. BUT consider network latency.

In the above case, the scripts from URLs will be found first, and appended to the main document head. They will then be requested from the server and take quite a while to load.

BTW, the ext scripts will already be loaded won't they? You are IN EXT, loading a page fragment, so you don't need to reload them do you?

The script with embedded source will probably execute before all the scripts from a remote server are loaded and parsed.

But I would not use scripts from a server in a loaded fragment. They should already be in the page.

marceloverdijk

21 May 2007, 12:09 AM

Hi Animal,

What I meant is that the example is my overall page. I'm using sitemesh to set it up (adding header, navigation etc); however the Center panel is more like the variable part in which I will include some fragments/parts.

In this case the fragment would be everything within the <script> tag.
In this example it's only a script, but it could also be grid div + script tag to build the grid.

But is the embedded script (within script tag) executed before or after script in head?

Animal

21 May 2007, 2:13 AM

OK, that's your main page.

I think that scripts in the <body> begin to be executed as soon as they are loaded. So if ext-all.js takes along time to load, the a script in the body will begin to execute before Ext is available.

This is how some "loading..." messages are added.

I think your script should go in the <head>

marceloverdijk

29 May 2007, 6:43 AM

Sorry for delay, was offline for a week or so.

To be more precise, what I want to do is embed a component in tag (e.g. JSP tag).
For example an <ext:grid> tag with child tags containing columns etc.

Now my pages looks something like:

<html>
<head>
.. include ext css + js
</head>
<body>
<ext:grid ..>
..
</ext:grid>
</body>
</html>

(Perhaps the page could also contain multiple grids or other tag embedded ext components.)

Now the question is how and when should I render grid?
I would say with embedded javascript, but should I use Ext.onReady() then or something else.

Any ideas appreciated.