ExtJS简单登陆界面

 

                     最近学习Extjs,由于之前未接触过于是根据网上资料案例和api模仿写了一个简单的登陆界面！有些地方有不足之处以后在做修改。

Ext.define('App.view.form.LoginForm', {extend : 'Ext.form.Panel',frame : true,title : '用户登陆',collapsible : true, //添加隐藏width : 380,height : 210,bodyStyle : 'padding:9px 9px 0', //边距样式iconCls : 'group', //面板头部图标defaults : {anchor : '100%', //随父容器大小变化},initComponent : function() {var me = this;Ext.applyIf(me, {fieldDefaults : {labelWidth : 80,msgTarget : "qtip",//修改这里的值msgTarget:"title"  msgTarget:"under"  msgTarget:"side"},items : [{xtype : 'textfield',inputId : 'ext_emp_en',allowBlank : false,blankText : '用户名不能为空', //错误提示fieldLabel : '用户名',name : 'empName',padding : '5px 5px 0',emptyText : '请输入用户名',cls : 'user',}, {xtype : 'textfield',inputId : 'ext_emp_pw',allowBlank : false,blankText : '密码不能为空', //错误提示fieldLabel : '密   码',name : 'empPassword',padding : '5px 5px 0',emptyText : '请输入密码',inputType : 'password',cls : 'key'}, {xtype : 'checkboxfield',fieldLabel : '记住密码',name : 'remember',padding : '5px 5px 0',}, {buttonAlign : 'center',buttons : [{text : '重置',icon : 'js/data/images/arrow_redo.png',margin : '0 40 0 0',handler : function() {Ext.getCmp("loginForm").form.reset();}}, {type : 'submit',text : '登陆',icon : 'js/data/images/lock.png',handler : function() {alert('');}}]}, {border : false,html : '<div class="login-a"><img src="js/data/images/chrome_icon.png" /><a href="http://www.google.com/chrome" target="_blank" title="点击下载谷歌浏览器"> 建议使用谷歌浏览器运行本系统</a></div>'}],});me.callParent(arguments);}});//设置图标Ext.onReady(function() {Ext.fly("ext_emp_pw").applyStyles({background : "none"});Ext.fly("ext_emp_en").applyStyles({background : "none"});})