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"
	});
})