extjs login example

an example of login page designed by extjs:

login jsp:

<%@ page language=”java” import=”java.util.*” pageEncoding=”UTF-8″%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+”://”+request.getServerName()+”:”+request.getServerPort()+path+”/”;
%>

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<base href=”<%=basePath%>”>

<title>理论学习与考试系统</title>

<meta http-equiv=”pragma” content=”no-cache”>
<meta http-equiv=”cache-control” content=”no-cache”>
<meta http-equiv=”expires” content=”0″>
<meta http-equiv=”keywords” content=”keyword1,keyword2,keyword3″>
<meta http-equiv=”description” content=”This is my page”>
<!–
<link rel=”stylesheet” type=”text/css” href=”styles.css”>
–>
<link rel=”stylesheet” type=”text/css” href=”ext/resources/css/ext-all.css”>
<link rel=”stylesheet” type=”text/css” href=”css/icon.css”>

<script type=”text/javascript” src=”ext/ext-all.js”></script>

</head>

<body background=”image/Apples-Aqua-Blue.jpg”>
<script type=”text/javascript” src=”js/login.js”></script>
</body>
</html>

—————————

login.js

Ext.onReady(function() {

var roleStore = Ext.create(‘Ext.data.Store’, {
fields : [‘label’, ‘value’],
remoteFilter : true,
proxy : {
type : ‘ajax’,
url : ‘comboRole.action’,
reader : {
type : ‘json’,
root : ‘root’
}
}
});

var loginPanel = new Ext.form.Panel({
id : ‘loginPanel’,
bodyStyle : “padding: 5px 5px 5px 5px”,
region: ‘center’,
defaults : {
xtype : “textfield”,
labelAlign : ‘right’,
labelWidth : 100
},
frame:true,
items : [{
fieldLabel : ‘用户名’,
name : ‘form.account’,
allowBlank : false,
blankText : ‘请输入用户名!’,
width: 350
}, {
inputType : ‘password’,
fieldLabel : ‘密&nbsp;&nbsp;&nbsp;码’,
name : ‘form.passwd’,
allowBlank : false,
blankText : ‘请输入密码!’,
width: 350,
listeners: {
specialkey: function(field,e){
if(e.getKey() == e.ENTER){
ulogin();
}
}
}
}/*, Ext.create(‘Ext.form.ComboBox’, {
fieldLabel : ‘角&nbsp;&nbsp;&nbsp;色’,
labelAlign : ‘right’,
labelWidth : 100,
width: 350,
store : roleStore,
displayField : ‘label’,
valueField : ‘value’,
name : ‘form.role’,
editable : false,
allowBlank : false,
blankText : ‘请选择您的角色’,
listeners : {
// ‘focus’ : function() {
// this.store.removeAll();
// this.store.load();
// }
}
})*/]
});
var loginWin = new Ext.window.Window({
title : ‘理论学习与考试系统’,
id : ‘_loginWin’,
width : 450,
height : 280,
plain : true,
bodyStyle : “padding: 10px”,
maximizable : false,
resizable : false,
closeAction : “close”,
closable : false,
collapsible : false,
plain : true,
buttonAlign : “center”,
layout : ‘border’,
items : [Ext.create(‘Ext.panel.Panel’,{
id: ‘northPanel’,
region: ‘north’,
height: 70,
autoScroll: false,
html: ‘<table border=”0″ width=”100%” id=”table1″ cellspacing=”0″ cellpadding=”0″ background=”image/lbg1.png”>’
+'<td width=”auto” align=”center”><img src=”image/shtitle.png” height=”26″/></td>’
+'<td width=”100″><img height=”80″ src=”image/lbg1.png” height=”30″/></td>’
+'</tr></table>’
}),loginPanel],
buttons : [{
text : ‘登&nbsp;&nbsp;录’,
iconCls: ‘ilogin’,
handler : function() {
ulogin();
}
}]
});
loginWin.show();

function ulogin(){
var loginPanel = Ext.getCmp(‘loginPanel’);
var loginForm = loginPanel.getForm();
if (loginForm.isValid()) {
loginWin.el.mask(‘logining’);
loginForm.submit({
url : “loginUser.action”,
success : function(form, action) {
var suc = action.result.success;
if (suc) {
var forward = action.result.forward;
window.location.href = forward;
} else {
var msg = action.result.msg;
Ext.Msg.alert(“failure”, msg);
loginWin.el.unmask();
}
},
failure : function(form, action) {
var msg = action.result.msg;
Ext.Msg.alert(“failure”, msg);
loginWin.el.unmask();
}
});
}
}
});

—————–

icon.css

.x-grid3-record-red .x-grid-cell{
color: #FF0000 ;
}

.ilogin {
background-image: url(../image/Actions-go-next-icon.png) !important;
}

——————-

Snap1

This entry was posted in Computer, Java. Bookmark the permalink.

One Response to extjs login example

  1. Pingback: extjs 4 login window example

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s