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