自定义图片按钮

/**
 * 定义图片按钮
 * 
 * @param {}
 *            cfg
 */
Ext.ux.ImageButton = function(cfg) {
    Ext.ux.ImageButton.superclass.constructor.call(this, cfg);
};
Ext.extend(Ext.ux.ImageButton, Ext.Button, {
    url : this.url || "",
    // disabled : false,
    imgWidth : 20,
    imgHeight : 20,
    onRender : function(ct, position) {
        this.disabledImgPath = this.disabledImgPath || this.imgPath;
        var tplHTML = '<div id="{id}" class="imageBtn_item"><table border="0" cellpadding="0" cellspacing="0" '
                + '            class="bossTool-x-btn-wrap">'
                + '<tbody><tr>'
                + '    <td class="bossTool-x-btn-left"><i> </i></td>'
                + '    <td class="bossTool-x-btn-center"><em unselectable="on">'
                + '       <img id="{id}_img" src="{imgPath}" border="0" '
                + '            width="{imgWidth}" height="{imgHeight}"'
                + '            style="cursor: {cursor};background:transparent"/>'
                + '       </em></td>'
                + '    <td class="bossTool-x-btn-right"><i> </i></td>'
                + '</tr>'
                + '<tr><td class="toolbtnText" colspan="3" align="center">{imgText}</td></tr>'
                +        '</tbody></table></div>';
        var tpl = new Ext.Template(tplHTML);
        var btn, targs = {
            imgPath : this.disabled ? this.disabledImgPath : this.imgPath,
            imgWidth : this.imgWidth || "",
            imgHeight : this.imgHeight || "",
            imgText : this.text || "",
            cursor : this.disabled ? "default" : "pointer",
            // tooltip : this.tooltip || "",
            id : this.id || "_image_default_id" + getImageId()
        };
        btn = tpl.append(ct, targs, true);
        btn.on("click", this.onClick, this);
        if (this.cls) {
            btn.addClass(this.cls);
        }
        this.el = btn;
        if (this.hidden) {
            this.hide();
        }
        new Ext.ToolTip({
                    target : this.id,
                    html : this.tooltip
                });
    },
    disable : function(newImgPath) {
        var replaceImgPath = newImgPath || this.disabledImgPath;
        if (replaceImgPath) {
            // this.el.dom.firstChild.src = replaceImgPath;
            Ext.fly(this.id + "_img").dom.src = replaceImgPath;
            Ext.fly(this.id + "_img").dom.style.cursor = "default";
        }
        this.disabled = true;
    },
    enable : function(newImgPath) {
        var replaceImgPath = newImgPath || this.imgPath;
        if (replaceImgPath) {
            // this.el.dom.firstChild.src = replaceImgPath;
            Ext.fly(this.id + "_img").dom.src = replaceImgPath;
            Ext.fly(this.id + "_img").dom.style.cursor = "pointer";
        }
        this.disabled = false;
    }
});
Ext.reg('imagebutton', Ext.ux.ImageButton);

CSS如下：

.imageBtn_item{
	padding-top:15px;
	padding-bottom:10px;
}
.bossTool-item-wrapper{
	margin:5px;
	padding:5px;
}
.bossTool-x-btn-center {
	/*background:transparent url(../images/button/button_center.gif) repeat-x;*/
	font-size:12px;
	/*text-align:center;*/
	vertical-align:middle;
	white-space:nowrap;
	background-position:0;
	/*height:23px;
	width : 75px;*/
}

.bossTool-x-btn-right{
	/*background:transparent url(../images/button/button_right.gif) no-repeat;*/
	width:3px;
	background-position:center right;
	height:23px;
}

.bossTool-x-btn-left {
	/*background:transparent url(../images/button/button_left.gif) no-repeat;*/
	width:3px;
	background-position:0;
	height:23px;
}


.bossTool-x-btn-text{
	background-position:center;
	background-repeat:no-repeat; 
	font-size:12px; 
	color:#FFFFFF;
	cursor:pointer;
	white-space:nowrap;
	padding:0;
}

.bossTool-x-btn em {
	font-size:12px;
	font-style:normal;
	font-weight:normal;
}
.bossTool-x-btn-center em {
	font-size:12px;
	font-style:normal;
	font-weight:normal;
}

.toolbtnText{
	font-weight:bold;
	text-align :center;
}