Ext.ImageButton = function(renderTo, config) {
    Ext.ImageButton.superclass.constructor.call(this, renderTo, config);
};

Ext.extend(Ext.ImageButton, Ext.Button, {
    render: function(renderTo) {
        this.disabledImgPath = this.disabledImgPath || this.imgPath;

        var tplHTML = '<input type=\'image\' name=\'{name}\' src=\'{imgPath}\' alt=\'{tooltip}\' title=\'{tooltip}\' tabindex=\'{tabIndex}\' />';

        var tpl = new Ext.Template(tplHTML);

        var btn = tpl.append(renderTo, {
            imgPath: this.disabled ? this.disabledImgPath : this.imgPath,
            imgWidth: this.imgWidth || "",
            imgHeight: this.imgHeight || "",
            imgText: this.text || "",
            tooltip: this.tooltip || "",
            name: this.name || "",
            tabIndex: this.tabIndex || ""
        }, true);

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

        if (this.cls) {
            btn.addClass(this.cls);
        }

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