Tuesday, April 29, 2008

How to add new events types to ExtJS components

I needed to be able to click on an Ext.Panel and have a window popup. The 'click' event is not a supported event for Ext.Panel. It turns out it is pretty easy to do in ExtJS. Almost every component has a getEl() method.

var myPanel = new Ext.Panel({
html: '<> Click Me < / h2>',
autoHeight: true
});

Once the panel has been rendered you simply, need to do the following.
var element = myPanel.getEl();
element.on('click', this.handleClick.createDelegate(this));

Now when ever a mouse clicks on the panel, the handleClick method will be called. The trick is that you have to wait until the panel has been rendered, to be able to add the event to it.

You may be tempted to use
myPanel.on({'click':this.handleClick.createDelegate(this), scope: this});

This method works great for events that the ExtJS Component supports by default, but doesn't work for other events.

1 comment:

Unknown said...

hello
thanks a lot
but could you explain more how to add a click listener to the panel
i tried to follow what you did but it didn't work!!!