Ext 超炫的登陆界面

写道

Ext.namespace("Login");
Login.app = function(){
return{
init:function(){
Ext.QuickTips.init();//需要的元件提供提示信息功能，form的主要提示信息就是客户端验证的错误信息了。
Ext.form.Field.prototype.msgTarget = 'side'; //第二句的目的就是设置控件的错误信息显示位置，
var Login_Form = new Ext.form.FormPanel({
width:438,
height:274,
border : false,
cls : 'loginbgimage',
baseCls : 'ex-panel',//设置透明FORM 嵌入页面
buttonAlign:"center",
labelWidth : 170,
labelAlign : 'right',
items : [{
xtype : 'panel',
baseCls:"x-pain",
border:false,
height:110
},{
fieldLabel : "机构",
xtype : "combotree",
id : "Org_ID",
width : 200,
allowBlank : false,
tree : {
xtype : "treepanel",
rootVisible : false,
animCollapse : true,
animate : true,
loader: new Ext.tree.TreeLoader({dataUrl:'loginOrgTree.do'}),
root : new Ext.tree.AsyncTreeNode({id:'0',text:'根结点'}) ,
autoScroll : true
}
},{
fieldLabel : "帐号",
xtype : "textfield",
id : "User_Account",
width : 200,
allowBlank : false,
maxLength : 12
},{
fieldLabel : "密码",
xtype : "textfield",
inputType : "password",
id : "User_Pass",
width : 200,
allowBlank : false,
maxLength : 12
},{
layout : "column",
baseCls : 'x-plain',
items : [{
columnWidth : .65,
layout : "form",
baseCls : 'x-plain',
//bodyStyle:'padding:2px 0 0 0',
items : [{
fieldLabel : "验证码",
xtype : "textfield",
id : "User_Alia",
width : 90,
allowBlank : false,
maxLength : 4,
allowNegative : false
}]
},{
columnWidth : .35,
height : 20,
baseCls : 'x-plain',
id : "login_image",
bodyStyle:'padding:8px 0 0 0',
style: 'font-size:14px; background:url(image.jsp); background-repeat: no-repeat; background-position: 0px 1px;center right no-repeat;'
}]
},{
xtype : 'panel',
baseCls:"x-pain",
border:false,
layout:"column",
items:[{
columnWidth:.4,
baseCls:"x-pain",
border:false
},{
columnWidth:.5,
baseCls:"x-pain",
border:false,
items:[{
xtype : "button",
text:"登陆系统",
handler:function(){
Login_Form.form.submit({
waitTitle : "请稍候",
waitMsg : "请求提交中... ...",
url : "loginAction.do",
params :{
Org_ID : Ext.getCmp("Org_ID").getValue()
},
success : function(form,action){
var obj = Ext.decode(action.response.responseText);
Ext.MessageBox.alert('友情提示',obj.Mag);
if(obj.result==2){
location.href='index.jsp'
}
},
failure : function(){
}
})
}
}]
}]
}]
})
Login_Form.render("Login_Form_Div");
Login_Form.el.center();//使的PANEL页面居中，注意必须放上渲染之后
}
}
}();
Ext.onReady(Login.app.init,Login.app);