扩展EXT.BUTTON

Ext.ux.ImageButton = function(cfg) {
Ext.ux.ImageButton.superclass.constructor.call(this, cfg);
};

Ext.extend(Ext.ux.ImageButton, Ext.Button, {
onRender : function(ct, position) {
this.disabledImgPath = this.disabledImgPath || this.imgPath;
var tplHTML = '<div><a href="###" class="image-btn"><span> {imgText:htmlEncode}</span></a></div>';
var tpl = new Ext.Template(tplHTML);
var btn, targs = {
imgText : this.text || ""
};

btn = tpl.append(ct, targs, true);

btn.on("click", this.onClick, this);

this.el = btn;
if (this.hidden) {
this.hide();
}
},
disable : function(newImgPath) {
var replaceImgPath = newImgPath || this.disabledImgPath;
if (replaceImgPath)
this.el.dom.firstChild.src = replaceImgPath;
this.disabled = true;
},
enable : function(newImgPath) {
var replaceImgPath = newImgPath || this.imgPath;
if (replaceImgPath)
this.el.dom.firstChild.src = replaceImgPath;
this.disabled = false;
}
});
Ext.reg('imagebutton', Ext.ux.ImageButton);

CSS定义如下:

.image-btn {background:url(./image/image_bg.gif) left 0;color:#222222;text-decoration:none;height:21px;float:left;cursor:hand;margin:0 5px 0 0;}
.image-btn:hover {background:url(./image/image_bg.gif) left -21px;text-decoration:none;height:20px;}
.image-btn span {background:url(./image/image_bg.gif) right 0;padding:1px 8px 0px 0;vertical-align:middle;margin:0 0 0 8px;float:left;line-height:20px;height:21px;}
.image-btn:hover span {background:url(./image/image_bg.gif) right -20px;color:#000;padding:1px 8px 0px 0;margin:0 0 0 8px;height:21px;}

展示如下

代码下载到我的资源区下载