Dynamic custom DOM Events - Mouse Event

As always every post has a reason.
Today I needed a solution where i need to invoke a event (rowclick) on a Ext GridPanel's object which is handled by a delegate function.
This invoking is suppose to be from an non DOM event. So the requirement is to MouseClick Event without clicking the mouse.

To clarify more.

Scenario:
I have a Ext.grid.GridPanel and is populated with some records.
Each 'rowclick' event is handled using a delegate function.


Problem Statement:
On an ajax request error event,
Need to add a row on the top and fire 'rowclick' on the same grid.

Solution:
Add a new row to the Grid.
Create a custom click event object.
Find the row HTML element.
Fire the custom click event object  on the row HTML elemnt.

Code:
1.var message = { Message: 'Communication error, server returned unexpected data', Description: message,    
                          Date: new Date() };
2.var rec = new this.store.recordType(message, ++this.counter);
3.this.store.insert(0, rec);


4.var evObj = document.createEvent('MouseEvents');
5.evObj.initEvent('click', true, true);
6. gridObj.getView().getRow(0).dispatchEvent(evObj);

Explanation:
Add a new row to the Grid.

1.var message = { Message: 'Communication error, server returned unexpected data', Description: message,    
                          Date: new Date() };
2.var rec = new this.store.recordType(message, ++this.counter);
3.this.store.insert(0, rec);

Create a custom click event object.

4.var evObj = document.createEvent('MouseEvents');
5.evObj.initEvent('click', true, true);



Find the row HTML element.
6.gridObj.getView().getRow(0).

Fire the custom click event object  on the row HTML elemnt.

6. gridObj.getView().getRow(0).dispatchEvent(evObj);

Thats iT!!!! Bingo.

Reference:  http://www.howtocreate.co.uk/tutorials/javascript/domevents

Using EXT JS

In recent time Client Side scripting has become very popular. Particularly if you observe maps.google.com or gmail, etc... every website/application is using client side scripting extensively. So did i encountered in my recent project. Before this project i have used core javascript , classes, objects, JSON, etc. This project required those aspects as basics, and a rich client side UI framework. We discovered ExtJs serving the purpose providing a stable, scalable,extendible framework with numerous widgets as the building controls.

One of the control is Window. How does it sound to simulate a window inside you webpage. To me it was something WOW!!! The following is the example for the same.

Chapter 01
A simple window with predefined text

Code Sample:

var initializeFn = function(){
var windowObj = new Ext.Window({title:'First ExtJs Window',html:'Sample predefined text',height:300,width:400});
windowObj.show();
};
Ext.onReady ( initializeFn );

This code uses ExtJs Base framework (http://www.extjs.com/).
You can refer the examples at http://extjs.com/deploy/dev/examples/samples.html.