View Full Version : Tutorial: How to build a Ext App. based on ExtDesigner exports that are dynamicly loa

18 Jun 2010, 6:33 AM
Tutorial: How to build a Ext Application based on ExtDesigner exports that are dynamically loaded on demand.

Files in Zip:
main.js - containing the module loader include_once();
mainwindow.xds - ExtDesigner Project file for the main Window
MyDemo.js|.ui.js - The files necessary for the Main window
xds_index.html - Main HTML that includes ext, main.js and myDemo.js|.ui.js
xds_index.js - Shows the main window
module1.xds|.js|.ui.js - All files necessary for Module1 - The Editor
module2.xds|.js|.ui.js - All files necessary for Module2 - The Progressbar
module3.xds|.js|.ui.js - Missing to show what happens wen a module is missing

1. Create the UI in ExtBulider:
Design the Main Window as you want and save the Project in a folder. Then export the Project. ExtDesigner will create xds_index.html and xds_index.js wich will be overwritten everytime you export a project in this folder. If you name your project 'MyDemo' ExtDesigner will also create a MyDemo.ui.js (which you should never edit by hand ? use Designer to make changes!) and MyDemo.js were all custom code belongs to.

2. Create one or more Modules:
Design the Modules but remember to set 'userxtype' property to something unique, this will be our 'module' name and it will be registered as a new xtype. Optionallyy you can define an autoRef name for your Components foreasierr access (i did so for the Buttons). Save and Export your Module as well (i named it module1 for this example). If you do so xds_index.html | .js are rewritten and will show the last module you created. Just reexport the main Application or create your own start filesssss (index.html & index.js for example) based on xds_index.html and .js

3. Create a function to dynamically load components
The Function 'include_once' is declared in 'main.js' which must be loaded within your main HTML file.

include_once = function (_url,_callback,_modulename) {}
_url : Url to a .js file that contains a module
_callback : a function that should be called after the module is completely loaded
_modulename: xtype of the module

4. Add functionality to your main Application
If you open xds_index.html in a browser you should already see your main Window as a prototype without any functionality. Now its time to add this functionality. Open die .js file (not .ui.js) of your main application Window (in this example mydemo.js).

In the Method 'initComponent' write the following:

initComponent: function() {

// Add event handler for Buttons

As you can see i added a 'onClick' handler named 'this.btn1OnClick' to the Button with the 'autoref' name 'btnMod1'.

Now we have to declare the method for this handler:

,btn1OnClick : function () {
First include the .ui.js file. Wee don't need a callback or modulename this time. Then include the .js file and tell include_once() wich callback function should be fired afterwards. The modulename will be passed to the callback as a parameter.

Here is the Callback Function:

,'mycallback' : function(_modulename) {
/** here is some information that can be used by the new window (don't use 'var')*/
someInformation = 'Ext is awsome';

/** here is some magic, this creates a window (or any other component)
* by using a xtype (out modulename) */
Ext.create({ xtype : _modulename }).show();
As you can see we first set a Variable with some info that can be used inside the Module (i used it to set the module Windows title). The second row actually creates the new Window by using the xtype passed by _modulename and immediately shows it!

That's it!

Take a look at the Files in the Zip File an play around with them. Do you have any comments, enhancements, hints for better English or questions please Post them here!

18 Jun 2010, 7:53 AM
Marcus, this is very useful - thanks for the tutorial!

18 Jul 2010, 3:57 AM
I am happy if it was usefull :-) Did you encounter any problems using it or du you have any notes to improve this aproach?