How to write effective application with Ext

[DavidHu]

I have written many web applications based on Jsp and servlets.
Thanks Jack's great work, now we can build more C/S like Web applications by using Ext.

I just wonder that how to organize my codes and pages.
I hope there are only JavaScript files like Panel1, Panel2, Dialog1, Dialog2, etc. Each JS file can build the UI by itself or simply read a layout file, such as Delphi’s dfm file.

I have checked out the Ext samples, I find that if I want to show a dialog, I must define the markup elements within the parent page. If there is one page to show 10+ dialogs, should I define all these dialog's elements in that parent page?

Please think if we can build the UI on each JavaScript file, then we can have a RAID tool to help our work, especially when the project the large.

[mpriatel]

One technique I used when working with TrimPath's template library which works in a similar way to Ext's is I kept all my template elements in individual HTML files so that they could be easily edited in my IDE (Dreamweaver) , and then created a servlet which generated a javascript file on the fly which contained a JS var for each template.

eg,

js_templates/
template1.html
template2.html

and the output JS file looked something like

jstpl_template1 = "<div>the template html</div>";
jstpl_template2 = "<div>the template html</div>";

then just include a <script> tag which points to the template generator

[DavidHu]

Thanks mpriatel, your method is quite simple and effective.

If Ext can give a "import" function to dynamicly load each JavaScripts, then all the problems will be solved. :)

[JeffHowden]

Rather than a JS file with HTML, why not look into the DomHelper class which has true templates to work with.

[mpriatel]

Oh, definately use DomHelper templates!

I'm just saying that from a maintenance point of view, its much easier to edit them if the HTML inside the template is in its own native file which can be manipulated by an IDE. Not every template is a simple one-line DIV, and keeping the templates out of my javascript means my designers can make changes on their own with no risk of mucking up the app.

So instead of

var t = new Ext.Template(
'<div name="{id}">',
'<span class="{cls}">{name:trim} {value:ellipsis(10)}</span>',
'</div>'

which although is a clever use of dynamic args, isn't as maintainable as:

var html = "<div>dynamically created JS that uses {template} {elements}</div>
var t = new Ext.Template(html);

once the app is deployed we just use a static version of the templates.js (instead of deploying the template builder which re-creates it on every request)

-mark

[JasonMichael]

Nice approach. I wonder what the storage limitation is on those vars... If you have a large template, I imagine you would max out the memory (or crash the browser), once in awhile.

[JeffHowden]

Nice approach. I wonder what the storage limitation is on those vars... If you have a large template, I imagine you would max out the memory (or crash the browser), once in awhile.
I'd imagine that, if there were an actual storage limitation, that it'd so large that it'd be completely impractical to actually use.