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

 

 

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 = '

{imgText:htmlEncode}

'; 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 : '', id : 'userName', name : 'userName', listenets : { "render" : function addUserName(obj){ obj.focus(); } } }) var txtPassWord=new Ext.form.TextField({ id : 'passWord', fieldLabel : '', 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(); });