PDA

View Full Version : How to "disable" icon?



dbassett74
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',
src: Ext.BLANK_IMAGE_URL,
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:

.disable()
.enable()

Any help would be appreciated.

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