View Full Version : How to "disable" icon?

24 Jul 2009, 6:01 AM
I have created a custom ImageButton class, with the following code:

ImageButton = Ext.extend(
Ext.BoxComponent, {
autoEl: {
tag: 'img',
cls: 'x-image-button'
height: 16,
width: 16,
onRender: function() {
this.autoEl = Ext.apply({}, this.initialConfig, this.autoEl);
ImageButton.superclass.onRender.apply(this, arguments);
this.el.on('click', this.handler, this);
this.tip = new Ext.ToolTip({
target: this.getEl()
, title: this.tooltip
onDisable: function() {

setSrc: function(src) {
if (this.rendered) {
this.el.dom.src = src;
} else {
this.src = src;

It works perfectly. However, one thing missing is the ability to disable it. I know that there should be a way to do this without creating a disabled version of each image because the Toolbar has the ability to disable images and slightly fade them out.

So what I'm looking for is the ability to call methods on the above ImageButton class such as:


Any help would be appreciated.

24 Jul 2009, 6:09 AM
You can get the disabled look by applying the x-item-disabled class.