Saturday, May 30, 2009

ExtJS Tip : Dynamically change a button icon

This works for ExtJS 2 or higher. Oddly, there is no method in the button class that allows you to change the icon dynamically. This is useful if you want to reuse buttons in the toolbar for example.

I found an override from this forum post which worked for me after a few tweaks.

Ext.override(Ext.Button, {
setIcon: function(url){
if (this.rendered){
var btnEl = this.getEl().child(this.buttonSelector);
btnEl.setStyle('background-image', 'url(' +url+')');
}
}
})