View Full Version : Need help modifying this "Image Button" extension

12 Aug 2009, 7:58 AM
I have the following ImageButton extension that works great. However, I need to extend it a bit to provide the following functionality:

1) Hard code (specify within the extension definition itself) two images (collapse.gif, expand.gif).

2) Specify a "state" such as "expanded" or "collapsed" when using the ImageButton.

3) On click, toggle from current state (collapsed) to the other state (expanded), while at the same time displaying the appropriate image and firing either the "collapsed" or "expanded" event.

Any help would be appreciated

MyExtensions.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);
MyExtensions.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;

Ext.reg('ImageButton', MyExtensions.ImageButton);