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>
<title></title>
<link rel="stylesheet" type="text/css" href="<%=path%>/js/ext/resources/css/ext-all.css" />
<!-- GC -->
<style type="text/css">
p {
margin:5px;
}
.settings {
background-image:url(<%=path%>/js/ext/icons/fam/folder_wrench.png);
}
.nav {
background-image:url(<%=path%>/js/ext/icons/fam/folder_go.png);
}
.info {
background-image:url(<%=path%>/js/ext/icons/fam/information.png);
}
</style>
<script type="text/javascript" src="<%=path%>/js/ext/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var form = Ext.create('Ext.form.Panel', {
layout: 'absolute',
url: '<%=path%>/login/action/doLogin.do',
defaultType: 'textfield',
border: false,
id: 'form',
bodyStyle:"background-image:url('<%=path%>/img/displaytag.png');background-repeat: no-repeat;padding:55px 5px 0",//添加背景图片
items: [{
fieldLabel: '帐号',
fieldWidth: 30,
msgTarget: 'side',
allowBlank: false,
x: 200,
y: 75,
name: 'userName',
anchor: '-5'
}, {
fieldLabel: '密码',
fieldWidth: 30,
inputType: 'password',
x: 200,
y: 105,
name: 'password',
anchor: '-5'
}
]
});
var win = Ext.create('Ext.window.Window', {
title: '后台系统登录',
width: 500,
height: 300,
minWidth: 300,
minHeight: 200,
layout: 'fit',
plain:true,
items: form,
buttons: [{
text: '登录',
handler: function() {
//window.location.href = form.url;
form.submit({
waitTitle: '用户登录',
waitMsg: '正在登录',
success: function (form, action) {
//Ext.Msg.alert('用户登录', '登录OK');
window.location.href = '<%=path%>/ext.jsp?name='+action.result.displayName+'&dept='+action.result.deptName;
},
failure: function (form, action) {
Ext.Msg.alert('用户登录', '用户名或密码错误！');
}
});
}
},{
text: '重置',
handler: function() {
Ext.getCmp("form").getForm().reset();
}
}]
});
win.show();
});
</script>
</head>
<body>
</body>
</html>
index.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>
<title>ext</title>
<link rel="stylesheet" type="text/css" href="<%=path%>/js/ext/resources/css/ext-all.css" />
<style type="text/css">
p {
margin:5px;
}
.settings {
background-image:url(<%=path%>/js/ext/icons/fam/folder_wrench.png);
}
.nav {
background-image:url(<%=path%>/js/ext/icons/fam/folder_go.png);
}
.info {
background-image:url(<%=path%>/js/ext/icons/fam/information.png);
}
.add {
background-image:url(<%=path%>/js/ext/icons/fam/add.gif);
}
.leaf {
background-image:url(<%=path%>/js/ext/icons/fam/leaf.gif);
}
.delete {
background-image:url(<%=path%>/js/ext/icons/fam/delete.gif);
}
</style>
<script type="text/javascript" src="<%=path%>/js/ext/ext-all.js"></script>
<script type="text/javascript">
Ext.require('Ext.tab.*');
var pubTabArray = new Array();
//某数组删除某数据
function removeById(array,id){
for(var i=array.length-1;i>=0;i--){
if(array[i] == id)
array.splice(i,1);
}
}
Ext.onReady(function(){
Ext.namespace("newtab");
var tree_store = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: '' //取下级菜单的url路径
},
nodeParam : "id",
root: {
text: '主菜单1',
id: 'root',
expanded: true,
children: [
{ text: "子菜单1", leaf: true, url: "index.jsp",id:'11',tabTitle: "子菜单1"},
{ text: "子菜单2", leaf: true, url: "index.jsp",id:'13',tabTitle: "子菜单2"},
{ text: "子菜单3", leaf: true, url: "index.jsp",id:'14',tabTitle: "子菜单3"}
]
},
folderSort: true,
sorters: [{
property: 'id',
direction: 'asc'
}]
});
var tree_store1 = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: ''
},
nodeParam : "id",
root: {
text: '主菜单2',
expanded: true,
children: [
{ text: "子菜单1", leaf: true, url: "index.jsp",id:'21',tabTitle: "子菜单1"},
{ text: "子菜单2", leaf: true, url: "index.jsp",id:'22',tabTitle: "子菜单2"},
{ text: "子菜单3", leaf: true, url: "index.jsp",id:'23',tabTitle: "子菜单3"}
]
},
folderSort: true,
sorters: [{
property: 'id',
direction: 'asc'
}]
});
//定义树图
var item1 = Ext.create('Ext.tree.Panel', {
store: tree_store,
title: '主菜单1',
id: 'root',
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop'//拖动菜单插件
},
listeners: {
drop:function(node,data,dropRec,dropPosition){
//放下之后触发
alert("把"+data.records[0].get("id")+"移动到"+dropRec.get("id"));
}
}
},
border: false,
iconCls : 'icon-page',
height: '100%',
listeners: {
beforeitemclick:function(view,record,item, index, e, eOpts ){
//单击组打开新的Tab
if(!Ext.Array.contains(pubTabArray,record.data.id)){
if(record.get("leaf")) {
var url = record.raw.url+"?node="+record.data.id;
addTab(true,record,true,url);
pubTabArray.push(record.data.id);
}
}else{
var arrayList = newtab.viewport.down('#tabs').items.items;
for(var i=0;i<arrayList.length;i++){
if(arrayList[i].title == record.raw.tabTitle){
newtab.viewport.down('#tabs').setActiveTab(arrayList[i]);
}
}
}
}
//,
//鼠标右键事件
//itemcontextmenu:function(menutree, record, items, index, e){
//e.preventDefault();
// e.stopEvent();
// var nodemenu=new Ext.menu.Menu({
// floating:true,
// items:[{
// text:"新增下级菜单",
// iconCls: 'add',
// handler:function(){
// alert("新增");
// }
// },{
// text:"修改菜单",
// iconCls:'leaf',
// handler:function(){
// alert("编辑");
// }
// },{
// text:"删除菜单",
// iconCls:'delete',
// handler:function(){
// alert("删除");
// }
// }]
// });
// nodemenu.showAt(e.getXY());
//}
}
});
var item2 = Ext.create('Ext.tree.Panel', {
store: tree_store1,
title: '主菜单2',
border: false,
iconCls : 'icon-page',
height: '100%',
listeners: {
beforeitemclick:function(view,record,item,index,e,eOpts ){
if(!Ext.Array.contains(pubTabArray,record.data.id)){
if(record.get("leaf")) {
var url = record.raw.url+"?node="+record.data.id;
addTab(true,record,true,url);
pubTabArray.push(record.data.id);
}
}else{
var arrayList = newtab.viewport.down('#tabs').items.items;
for(var i=0;i<arrayList.length;i++){
if(arrayList[i].title == record.raw.tabTitle){
newtab.viewport.down('#tabs').setActiveTab(arrayList[i]);
}
}
}
}
}
});
//新增tab 标签页
function addTab (closable,record,pubFlag,url) {
var tabs = newtab.viewport.down('#tabs');
//var grid=getGrid(pubFlag,tabId,qtip,url);
tabs.add({
title: record.raw.tabTitle,
closable: !!closable,
collapsible: true,
anchor: '100%',
html : '<iframe id="frame-' + record.data.id + '" src="' + url + '" width="100%" height="100%" frameborder="0" scrolling="auto" />',
listeners: {
'destroy': function(panel,eOpts ){
if(pubFlag)
removeById(pubTabArray,record.data.id);
else
removeById(priTabArray,record.data.id);
}
}
}).show();
}
var item3p = Ext.create('Ext.Panel',{
region:"center",
layout:"border",
items:[{
title:"功能菜单",
width: 200,
layout: "accordion",//菜单叠加
region: "west", //左边菜单项
collapsible:false, //是否伸缩
fields:['id','text'],
rootVisible : false,//显示根节点
items: [item1,item2]
},
{
xtype:"tabpanel", //选项卡
id:"main_tabpanel",
itemId: 'tabs',
region:"center",
items:[
{title:"首页",html:'<iframe src="index.jsp" width="100%" height="100%"/>'}
]
}],
tbar: ['->',{
xtype: 'tbtext',
text: '${displayName},你好！'
},'-',{
text: '部门：${deptName}'
},'-',{
text: '退出系统',
handler: function() {
window.location.href = '<%=path%>/login.jsp';
alert("退出成功");
}
}]
});
newtab.viewport = Ext.create('Ext.Viewport',{ //注意这里是Viewport，NO ViewPort
enableTabScroll:true,
layout:"border",
items:[
{
region:"north", //顶部面板
height:80,
html:'<img src="<%=path%>/img/title.png" style="background-repeat: repeat;"/>'
},
item3p
]
});
});
function checkLogin(){
if('${userLogin}' != 'LoginSuccess'){
window.location.href = "<%=path%>/login.jsp";
}
}
</script>
</head>
<body onload="checkLogin1()">
</body>
</html>
分享到：
相关推荐
ext4.1简单的登陆界面 包含login.jsp 验证码.jsp
Ext登陆界面源代码,仅供参考。此乃小弟辛辛苦苦学习后整理出来的，有从网上参考别人的代码，有自己整理的。
ext2.2包括登陆页面和主框架页面。 简洁，漂亮
ext 主界面模板ext 主界面模板 ext 主界面模板 ext 主界面模板
Ext界面生成器Ext界面生成器Ext界面生成器Ext界面生成器
基于extjs4.2开发，是对我之前发布的《ext4.1简单的登陆界面》的升级和简化。调整login.html里extjs的引用路径，在浏览器里直接运行即可
ext做的登陆界面，ext实现的登陆界面，非常的酷
这里面有ext 制作界面的一些心得，要用ext开发后台框架的可以运用下哦
Ext界面设计器 ExtDesigner. ext界面自动生成器 内附安装说明，破解文件
Ext界面开发面板比较！
EXT登陆验证码
Ext界面生成器 Ext界面生成器,EXT,UI
EXT界面生成器 作者网站：http://tof2k.com/ext/formbuilder/ 汉化者网站：www.17ext.com EXT界面生成器 EXT界面生成器 EXT界面生成器
Ext界面生成器 Ext界面生成器 Ext界面生成器
Ext界面生成，功能不错！可以自动生成界面，适合Ext学习者
Ext 通过界面生成代码 生成器 Ext 通过界面生成代码 生成器
Ext后台界面源码0000001版 本原码只是界面设计适合ext初学者
EXT图形界面编辑器,很方便就能拖拉出布局以及各种组件。呵呵，的确比传统的方便多了！
一个Ext界面速度生成的小工具 拖曳式的控件环境 可以帮你快速的开发出界面代码
ext.net主界面，有了它后面自己再增加一些自己的内容就可以了