Totti's Blog

What makes your ExtJS application run so slow ?

Totti — Sun, 15 May 2011 09:25:49 +0000

By “slow” here I mean the slow run-time, not the load time of resources.

In the past one year and a half, I have been working at Bosch Software Innovations, Robert Bosch, where our frontend technology stack heavily relies on ExtJS. I had chances to develop Visual Rules Web Modeler and helped with several other ExtJS-based apps and I did experience a lot of performance issues with ExtJS apps in common.

In this article, I’m gonna share with you the key bottlenecks that might cause an ExtJS app to run slow, and also point out the mistakes that rookie ExtJS devs most likely make.

ExtJS in this article refers to the version 3.3.x and below.

1. Over-declaration of Ext.Panel

The most used ExtJS component, IMO, would be Ext.Panel. Declaring a panel with ExtJS is so simple that developers could easily over-declare them. Below is a typical declaration of a panel with nested sub-panels.

var panel = new Ext.Panel({         // Level-1
     title: 'Multi Column, Nested Layouts and Anchoring',
     bodyStyle:'padding:5px 5px 0',
     width: 600,
     items: [{                   // Level-2
        layout:'column',
        items:[{                // Level-3
               columnWidth:.5,
               layout: 'vbox',
               items: [{           // Level-4
                  html: 'This is some text'
               }, {
                  html: 'This is another text'
               }]
        },{
               columnWidth:.5,
               layout: 'form',
               items: [{
                      xtype:'textfield',
                      fieldLabel: 'Last Name',
                      name: 'last',
                      anchor:'95%'
               },{
                      xtype:'textfield',
                      fieldLabel: 'Email',
                      name: 'email',
                      vtype:'email',
                      anchor:'95%'
               }]
       }]
   }]
});

Any problem with this config ? NooO !? The problem is that this panel has four nested levels of panels, but it actually needs two in order to work and look as desired.

This is an example of over-declaration which leads to seriously deep nested level of HTMLElements created, and severely affects the initialization/rendering time and run time of the component.

I’ve seen ExtJS developers who just like to declare nested panels because it’s convenient for them to put some CSS styles, text or images inside.. or sometimes just because adding another level of panel makes the form look as desired !?!

The rule of thumb is: use as few panels and nested levels of components/panels as possible.

To achieve this you need to wisely make use of Ext layouts and CSS styles when declaring a complex component.

2. Delay the HTMLElement creation whenever possible

Interacting (Read/Write) with the DOM is always not cheap, especially on IE 6, reading the DOM also causes re-flow.

So the rule of thumb is: try to delay the creation of HTMLElements whenever possible. This could be achieved by:

Component Lazy instantiation. This is possible with xtype.
Try to defer expensive operations till afterrender.
Avoid unnecessarily instantiating/rendering components in the constructor or initComponent of another component.

Example 1: A simple example is do not create Ext.Tooltip and render it hiddenly in the DOM when the button is first rendered. The tooltip usually should be rendered at the first time users hover mouse over the button. If tooltip is rendered right after the button, and users never hover mouse over the button. We have already created a wasted, never-used tooltip which adds up to the performance issue.

Example 2: Another example is careless use of renderTo:

var window = new Ext.Window({
     renderTo: document.body,
     title: 'The Untitled'
});

window.show(); // the window has been rendered before this line

With the above declaration, the window will be rendered immediately and hidden to the tag. In many cases, we don’t need the renderTo, the window should be rendered only when it is displayed the first time as following:

var window = new Ext.Window({
       title: 'The Untitled'
});

window.show(); // the window is to be rendered and displayed at this line

3. Use the delegate pattern whenever possible:

I’m not gonna dig into the details of delegate pattern here, but will rephrase it in ExtJS language instead.

Example: An example of delegate pattern is that you have an Ext.Toolbar with 10 Ext.Button, and you need to assign Ext.Tooltip to every button so that when users hover mouse over a button, a Tooltip is displayed with an explanation text.

If you create 10 Ext.Tooltip and assign them to 10 Ext.Button then it is not the most optimized solution. You can create only 1 Ext.Tooltip and assign it to the parent element, which is Ext.Toolbar, of those 10 Ext.Button.

When users hover mouse over the Ext.Toolbar, you will display the same Ext.Tooltip but with different explanation text according to the target element ( actual Ext.Button ) being mouse over. (See getTarget for how to get target element)

With this technique, only 1 Ext.Tooltip is created, and 1 event listener is attached to the Ext.Toolbar.

Saves you a lot of memory usage and run time of your app but still achieves the same result.

You might want to look at delegate config property of Ext.Tooltip for the sample implementation.

4. Component destruction – How to destroy things properly

This is one of the main bottlenecks I found in the slow ExtJS apps that I have helped improving the performance. The idea is when a component is not in use any more, we should clean up :

The HTMLElements existing in the DOM
Dettach all event listeners to avoid memory leaks.
Destroy all descendant components in the same recursive way

These above are handled in the method destroy of an Ext.Component. There are cases you need to call #destroy method during run time as leaving unused components in the DOM would lead to severe slow performance.

Example 1: if you happen to create a custom Context Menu (Ext.menu.Menu) inside a panel (Ext.Panel), remember to override the destroy method of the panel, and destroy the context menu in there. Later if the panel gets destroyed, your context menu gets destroyed too.

Your.Component.Klass = Ext.extend(Ext.Component, {
initComponent: function(){
     // Initialize your custom stuff
     this.contextMenu = new Ext.menu.Menu({
           renderTo: document.body
           // ..
      });
},

destroy: function(){
      // Destroy your custom stuff
      this.contextMenu.destroy();
      this.contextMenu = null;

      // Destroy the component
      Your.Component.Klass.superclass.destroy.call(this);
}
});

Example 2: One common mistake is the misuse of config option closeAction of Ext.Window.

If you configure closeAction as ‘hide‘, the window will be hidden when users hit the ‘Close’ button. However, there is a chance that, the window will never be displayed again through out the whole run time. So make sure if yosu really want to do the show/hide, otherwise always configure closeAction as ‘close‘ for the .destroy method will be called on the window after it is hidden to destroy it properly.

var window = new Ext.Window({
   closeAction: 'hide',
   title: 'The Untitled'
});

window.show(); // render and display the window
window.hide(); // the window is not destroyed but only hidden in the DOM.

I hope this article would give you some clues fighting with performance issues of your ExtJS-based applications. If you have other experience regarding performance issues specific to ExtJS apps, feel free to share here !

Cheers,

Totti

ExtJS – How to scroll Ext.Panel by Drag and Drop ?

Totti — Sat, 18 Sep 2010 17:43:32 +0000

In an ExtJS panel (Ext.Panel) where the content area is huge but the Panel size is limited,
users usually use the MouseWheel to scroll vertically Up and Down.
However, the Drag n Drop feature could actually allow users to scroll both vertically and horizontally by dragging and dropping the content (or body) of Ext.Panel.

In this entry, I’ll walk you guys through a simple implementation of scrolling Ext.Panel
Vertically and Horizontally by Dragging and Dropping using Ext.dd.DragZone.

Examples of sites having this feature:
1. maps.google.com (Use .png files for hand cursors)
2. gothere.sg (Use .cur files for hand cursors)

In these cases, users don’t need to manually move the mouse to the horizontal / vertical scrollbars and slide them, they could do the scrolling by just dragging the content around. The map implementation is a typical example.

I wrapped this panel together with the DragZone in a simple Panel extension.

The main idea is create CSS classes to show the hand icons when users move and drag the panel body:


.x-panel-wrap-dd-area {
 cursor: url(../images/open_hand.cur), pointer;        /* Show open_hand cursor */
 -moz-user-select: none;                                /* Disable text selection */
 -webkit-user-select: none;
}

.ext-ie .x-panel-wrap-dd-area {
 cursor: url(images/open_hand.cur), pointer;            /* Show open_hand cursor */
}

.x-panel-wrap-dd-area-scrolling {
 cursor: url(../images/closed_hand.cur), pointer;    /* Show closed_hand cursor */
}

.ext-ie .x-panel-wrap-dd-area-scrolling {
 cursor: url(images/closed_hand.cur), pointer;        /* Show closed_hand cursor */
}

You can have a look at the Demo page and the source code.

Cheers,

Totti

ExtJS Accordion-Vbox custom hybrid layout

Totti — Sat, 21 Aug 2010 11:40:34 +0000

ExtJs has two well-known layouts called Accordion and Vbox.

Basically, in a vertical list of panels, AccordionLayout manages multiple Panels in an expandable accordion style such that only one Panel can be expanded at any given time. Each Panel has built-in support for expanding and collapsing.

VboxLayout, on the other hand, arranges items vertically down a Container. This layout optionally divides available vertical space between child items containing a numeric flex configuration.

From the need of one of my projects, I came up with a custom hybrid layout between Accordion and Vbox.. that allows multiple panels to be collapsed at a time but the sizes of other expanded panels are automatically resized according to the new empty space available.

This is a very practical layout when you have a long vertical panel consisting of different sub-panels. Users can selectively collapse some unused panels, and all of the other expanded panels will take up the available space accordingly.

Main configuration follows the API doc of VboxLayout.

You can check out the demo and comparison between layouts here.

Extension tested working on IE6+, FF3, Safari 4, Chrome, and Opera 10.54+ with ExtJS 3.2.1

Download the source

You’re welcome if having any feedback.

Cheers,

Totti

IE z-index bug

Totti — Thu, 05 Aug 2010 01:54:01 +0000

Z-index bug on IE is a well-known flaw that most of front-end web developers have heard about. It is documented pretty clear on PPK Quirksmode:

http://www.quirksmode.org/…/Explorer_z_index_bug.html

and here

http://therealcrisp.xs4all.nl/../IE-zindexbug.html

Basically here is the break-down of the workaround…

We have two div elements box1, nested in box3 and box2.

And we want box1 to be on top of box2 by setting z-index as the following :


.canvas {
 position: relative;
}

.box {
 width: 50px;
 height: 50px;
 position: absolute;
}

#box1 {
 top: 20px;
 left: 20px;
 background: green;
 z-index: 4000;
}

#box2 {
 top: 50px;
 left: 50px;
 background: yellow;
 z-index: 3000;
}

The above code makes box1 appear on top of box2 on all browsers except IE 6+ as positioned elements do generate a new stacking context, starting with z-index of 0. In this case since box3 and box2 are siblings (on the same level), and box3 's z-index is less than that of box2, so box2 and its child nodes ( on a higher stacking context ) will be always on top of box3 and its child nodes.. even if some of box3's child nodes have higher z-index than those of box2 and its child nodes ( box1 has z-index of 4000 but is still displayed beneath box2 of z-index 3000).

The solution here is to put box1 in a stacking context higher than that of box2 by making z-index of box3 higher than that of box2.

#box3 {
  z-index: 30001;
}

Now box1 is on top of box2 as desired ! How about two elements nested in cells of the same table like this:

All you need to do is set the z-index of td3 higher than that of box2 to make td3 and its child nodes (including box1) stay on top of box2.

.td3 {
    position: relative;
    z-index: 3001;
}

.box {
	width: 50px;
	height: 50px;
	position: absolute;
}

#box1 {
         z-index: 4000;
}

#box2 {
         z-index: 3000;
}

You will notice I set td3 to position:relative so that the TD cell still keeps its relative position with respect to other cells in the table.

That is for today   Feel free to share your ideas on this bug IE bug with us..

Cheers,

Totti

fdfd

Box 2

Box 3

ExtJS Vertical TabPanel example

Totti — Wed, 31 Mar 2010 02:16:28 +0000

Currently, ExtJS 3.1.1 doesn’t support Vertical TabPanel. Here is my simple custom Vertical TabPanel ux class. Currently, it supports the same set of features as Ext.Tabpanel except advanced auto tab-scrolling feature. Default position is “left”.

Tested working on FF2+, IE6+, Chrome 4, Safari 4, and Opera 10.

You can put the source files in ExtJS Tabs folder to test: ext-3.1.1\examples\tabs\..

Check out the live example here

Download the whole example
Download the extension code only

21/10/2010 : Released v0.2. Updated to work with ExtJS 3.3

02/03/2011 : Released v0.21. CSS minor bugs fixed.

Cheers,

Totti

The interesting javascript window object

Totti — Sat, 27 Feb 2010 18:44:25 +0000

As we all know that in Client-side Javascript, the Window object is the global variable, a host object, that contains attributes of the current opened window. An interesting part is this object also has a property called ‘window‘ which refers to itself. I’m not sure why this special object is implemented that way.

alert(window);  // object Window
alert(window.window);   // object Window
alert(window.window.window);  // object Window
alert(window.window.window === window);   // true

A fun bit about this is the window object is read-only, while the self object, also referring to the current opened window, is not.

// Try assigning window to null
window = null;
alert(window);  // object Window
window.window = null;
alert(window.window); // object Window

// Try assigning self to null
window.self = null;  // only on IE 6, 7 this will returns exception: 'Not Implemented'
alert(window.self)  // on other browsers, self now is null.
alert(window)  // object Window .

This proves that self object actually is just a reference of window. And self could be assigned to point to other objects while window remains intact.

Just my 2 cents with window on Firefox

Totti

IE and CSS class-chaining

Totti — Sat, 27 Feb 2010 13:26:06 +0000

Internet Explorer 6, 7 both do NOT support CSS class-chaining as a couple of articles floating around on the internet say. Basically, CSS class-chaining is used to select HTML elements which have multiple CSS classes:
For example:


Single


Multiple

To select the later element we can use CSS class-chaining like:

.cls1.cls2.cls3 {
    /* your style */
}

However, IE6, 7, will see this as

.cls3 {
}

because .cls3 is placed last in the chain .cls1.cls2.cls3
This selector .cls3 apparently applies to both the first and second HTML elements.

A workaround to this IE bug is using parent-child CSS selector by adding additional child elements:

Multiple


       
                 Multiple

And now we can select this element by

.cls1 .cls2 .cls3 {
    /* your style */
}

which is fully supported by IE 6+.

Cheers,

Totti

Javascript: Function length vs arguments

Totti — Fri, 12 Feb 2010 18:59:08 +0000

One of the reasons quite a number of programmers don’t like Javascript because it’s weird, behaving differently on different browsers.. and hard to debug.. However, it’s quite fun or even addictive to learn JS also for that reason. Below is a brief on two mysterious properties of Javascript functions : length, and arguments.

arguments :
- available : only inside a function’s body
- is : an array of parameters/arguments provided when the function is called.

length :
- available : both in/outside a function’s body. Could be called using : functionName.length
- is : the total number of arguments declared in the function’s signature

Below is the demo snippet showing how to use these properties:

var myFunction = function(a, b, c, d, e) {
		// total number of params declared : TRUE
		alert(myFunction.length == 5);

		// real number of arguments provided : TRUE
		alert(arguments.length == 2);

		// you can also refer to the function using its name : TRUE
		alert(myFunction.arguments.length == 2);		

// how to refer to the arguments provided ?
		alert(a === 'x' && arguments[0] === 'x');
		alert(b === 'y' && arguments[1] === 'y');
};

// myFunction is called with two arguments only
myFunction( 'x', 'y' );

// total number of params declared : TRUE
alert(myFunction.length == 5);

// undefined : FALSE
alert(myFunction.arguments == 2);

Have fun,

Totti

ExtJS : How to disable browser context menu

Totti — Wed, 10 Feb 2010 17:06:07 +0000

This is a quick solution to disabling browser default context menu when right-clicking in ExtJS.


Ext.getBody().on("contextmenu", Ext.emptyFn, null, {preventDefault: true});

Basically, you can implement a TreePanel or other ExtJS components like:

new Ext.tree.TreePanel({
        listeners: {
               render: function() {
                       // After the component has been rendered, disable the default browser context menu
                       Ext.getBody().on("contextmenu", Ext.emptyFn, null, {preventDefault: true});
               },
               contextmenu: function(e) {
                       // Init your context menu
               }
        }
});

Tested working on FF 3.6, Chrome 3, Safari 4 and IE7. Opera 10 unfortunately fails.

JSMag for FREE

Totti — Tue, 05 Jan 2010 15:51:34 +0000

JSMag is currently kinda the only Javascript magazine for enthusiastic front-end developers. I’m a subscriber of this magazine, finding it really fun, and interesting to read, especially if you love Javascript. This is a must-read for you and only costs $4.99. You can purchase at JsMag or ..I will periodically, and per request, upload old JSMag for the “hungry”-minded to download . However, I can’t upload the latest ones as ..you know

Below are several issues I found very informative.
Issue 1
Issue 2
Issue 4
Issue 7
Issue 8
Issue 11

Totti

Oct 06, 2010 : Links removed due to request by editor