ext中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(); });