ext.ux.ImageButton的用法（图片按钮）

var simple;
function createFormPanel(){

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}" mce_src="{imgPath}" border="0" width="{imgWidth}" height="{imgHeight}" alt="{tooltip}" style="cursor: {cursor};" mce_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);

var myImageButton=new Ext.ux.ImageButton({
imgPath : '../images/dl_pic.jpg',
imgWidth : 77,
imgHeight : 64,
tooltip  : 'test',
handler : loginGo
});

var myImageButton=new Ext.ux.ImageButton({
imgPath : '../images/dl_pic.jpg',
imgWidth : 77,
imgHeight : 64,
tooltip  : 'test',
handler : loginGo//loginGo是方法
});

var txtUserName = new Ext.form.TextField({
fieldLabel	: '<bean:message key="username"/>',
id			: 'userName',
name		: 'userName',
listenets	: {
"render" : function addUserName(obj){
obj.focus();
}
}
})
var txtPassWord=new Ext.form.TextField({
id			: 'passWord',
fieldLabel	: '<bean:message key="password"/>',
name		: 'passWord',
inputType	: 'password'
});

simple = new Ext.FormPanel({

frame		: true,
id			: 'login',
region		: 'center',
forceFit	: true,
border		: true,
width		: 360,
height		: 70,
renderTo 	: 'loginForm',
items		: [{
layout:'column',
border:false,
items  :
[
{columnWidth	:.62,
border	   	: true,
layout      : 'form',
labelWidth	: 40,
items		: [txtUserName,txtPassWord]}

},{
columnWidth	:.38,
border	   	: true,
layout      : 'form',
labelWidth  : 40,
items		: [myImageButton]
}]
}],

keys:[{
key:Ext.EventObject.ENTER,
fn:loginGo,
scope:this
}]
});

}

function loginGo(){
if(!checkUserInfo(this)){
return false;
}
document.forms[0].action='<%=basePath%>/login.do;
document.forms[0].submit();
}

Ext.onReady(function(){
Ext.form.Field.prototype.msgTarget = 'side';
createFormPanel();
<%
if(request.getAttribute("userName")!=null){
%>
var userName='<%=request.getAttribute("userName")%>';
simple.findById("userName").setValue(userName);
<%}%>
simple.findById("userName").focus();
});