Ext.ux.ImageButton的使用（带有图片的按钮） 示例

Ext.ux.ImageButton的使用（带有图片的按钮） 示例

效果：

调用方法：

var myImageButton=new Ext.ux.ImageButton({
            imgPath : 'images/test.gif,
            imgWidth : 60,
            imgHeight : 60,
            tooltip  : 'test',//鼠标放上去的提示
            handler : function(btn) {
                 Ext.MessageBox.alert(''test',''test'');
                }
             });

 

Ext.ux.ImageButton.js文件源码：
Ext.namespace('Ext.ux');
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><img src="{imgPath}" border="0" width="{imgWidth}" height="{imgHeight}" alt="{tooltip}" style="cursor: {cursor};"/> {imgText:htmlEncode}<br/><br/></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 || ""
  };
  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();
  }
 },
 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);