扩展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);

.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;}