最近学习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"
});
})