自定义图片按钮

mutongwu

/** * 定义图片按钮 *  * @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;}