Extjs - Create and work with multipage applications

Extjs is single page application, but as users of extjs are growing across, applications are also growing. With large applcations users want mult page applications.

With extjs in single page application you can't have multiple html/jsp files. If you want to have multiple page you need to create multiple folders, seperate folder for each page. This approach solves the problem but it will create duplicate files in your project.

To solve this issue, Sencha come up with Workspaces in sencha cmd.

To setup sencha workspace you need to install Sencha cmd.

Once sencha cmd is installed on your machine, fire following command

 sencha generate workspace /path/to/workspace                                        

Sencha workspace folder structure

this will initiate workpace in given folder.

So till now you are done with setting up sencha workspace, next step is to create pages in workspace. Use following sencha command to generate pages:

sencha -sdk /path/to/ext generate app GridDemo /path/to/workspace/GridDemo   

This command will create files in folder as

Sencha workspace application folder structure

Next step is to minify your code to put in live environment, navigate to page folder under workspace and fire following command

sencha app build    

Sencha will minify JavaScripts and stylesheets and collate those in one minified file. Output of build is placed in workspace/build/production/

There will the code which is common to all pages, there are two options:

1. Packages: Sencha provide packages feature so that you download/write javascript, sass and resources packages and integrate those with your application. In case of single page application its seasy you have to copy those in packages folder, but with multipage those packages should be   shared with all applications which are there in you extjs workspace.
   
   
   To share packages between workspace applications packages are downloaded once and stored in ./packages folder in workspace. This package folder location is configurable and set in .sencha/workspace/sencha.cfg files in workspace.package.dir property.
   
   
2. workspace.classpath: Lets say there are common javascript files which will be shared in all applications in workspace, So we can put those in common folder in workspace and tell sencha cmd to include those files while doing sencha build on applications. You have to tell sencha cmd which one is the common folder and from next sencha app build it starts to include files from that folder in build. Path is configured in .sencha/workspace/sencha.cfg file, in workspace.classpath property.
   
   
   E.g. workspace.classpath=${workspace.dir}/common/src

Extjs - Performance tuning

Things which can improve performance

Minimize network latencyCheck event listenersUse the afterrender and onrender event only when necessaryRemove doLayout and doComponentLayoutReduce container nestingUse container instead of Panels when possibleUse Ext.suspendLayouts and Ext.resumeLayouts when adding or removing a lot of components or elementsWatch out for leakageBatching

 

1.       Minimize network latency

Parallel your downloads

a.       Browser has limit on number of concurrent network connections to any one domain

b.      Avoid 404 errors – Server calls responding with 404 errors can be used to download other resources which will result fast loading of application.

c.       Load all your css files first. Script load blocks browser .

Concatenate and compress resources

d.      Use sencha SDK tools to build a single minified JavaScript file

 

2.       Check event listeners

Manage your event listeners
E.g.
                You might set event to fire first time when store get data.
                If you don’t want same event to fire each time when store get data use single:true
                listeners: { 
                                load: onFirstLoadData, 
                                single: true 
                }

 

3.       afterrender and onrender

The afterrender event is invoked after all DOM elements already exist, changing element after rendering causes reflows.

Use beforerender event to set styles and classes.

With ExtJs 4.1 you can use new event, boxready. It runs after the size of component has been determined. You can consider it as option to afterrender event.

 

4.       Remove doLayout and doComponentLayout

doLayout or doComponentLayout should be needed for is when the DOM is directly changed by application code.

ExtJs framework is unaware of such changes, these calls are needed to update the affected layouts.

 

5.       Reduce container nesting

Each container takes time to initialize, render and layout. So the more you get rid of unneeded nested containers, the faster your application will run.

 

6.       Use container instead of Panels when possible

By default xtype is ‘panel’

Panels are more powerful and expensive than basic containers

When you need to group your fields and does not require toolbars or headers , use Container.

Panel should be used when you require such features like pagination , title, bottom bar(bbar).

 

7.       Ext.suspendLayouts and Ext.resumeLayouts

ExtJs 4.1 provides two methods, Ext.suspendLayouts and Ext.resumeLayouts

Each time you add or update component, causes layout and render operations to be performed.
{ 
                Ext.suspendLayouts(); 
                // batch of updates         
                Ext.resumeLayouts(true); 
}

While doing multiselect operations on the grid or inserting/deleting multiple records use it.

 

8.       Watch out for leakage

        Ext.define('MyClass', {
                        ... 
                        constructor: function(config) { 
                                        ... 
                                        this.store.on('load', function() { 
                                                        ... 
                                        }, this); 
                        } 
        });

The new listener function is created each time this constructor runs. This not takes time but potentially could leak loads of memory.

                Ext.define('MyClass', { 
                                ... 
                                constructor: function(config) { 
                                                ... 
                                                this.store.on('load', this.onStoreLoad, this); 
                                }, 
                                onStoreLoad: function() { 
                                                ... 
                                } 
                });

In this case the listener function is created once and store on the class, each instance will share the same function. Overhead of creating the function is reduced to one and there is no risk of a leaky closure.

 

9.       Batching

record.beginEdit(); 
record.set('name', 'Tom'); 
record.set('age', 17); 
record.set('member', true); 
record.endEdit();

record.set({ 
                name: 'Tom', 
                age: 17, 
                member: true 
});

// slow

container.add(panel); container.add(button); container.add(grid);

// fast 
container.add(panel, button, grid);

Extjs grid features

Extjs grid provides lots of features, it is easily configurable.

Grid provide following features

1. Configuring columns
2. Renderers
3. Selection Models
4. Sorting and Filtering
5. State saving

More plugins and features

1. Cell editing
2. Row editing
3. Drag and drop
4. Pagination
5. Infinite scrolling
6. Row numberer
7. Grouping
8. Summary
9. Grouping summary