最近因为extjs4.0反应速度太慢,所以重新研究了一下3.4,废话也不多说了直接上代码。
首先是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="<%=basePath %>ext/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="<%=basePath %>css/ext-icon.css">
<link rel="stylesheet" type="text/css" href="<%=basePath %>css/table.css" />
<link rel="stylesheet" type="text/css"href="<%=basePath %>css/backstage.css" />
<script type="text/javascript" src="<%=basePath %>ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=basePath %>ext/ext-all.js"></script>
<script type="text/javascript" src="<%=basePath %>ext/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%=basePath %>ext/ux/ProgressBarPager.js"></script>
<script type="text/javascript" src="<%=basePath %>backstage/backstage.js"></script>
</head>
<body>
<div id="form1"></div>
</body>
</html>
接着是引用的js:
Ext
.onReady(function() {
Ext.QuickTips.init();
var password = new Ext.Window(
{
width : 300,
height : 250,
id : 'password',
labelWidth : 30,
closeAction : 'hide',
items : [ {
xtype : 'form',
width : 300,
height : 300,
title : '修改密码',
bodyStyle : 'padding-top:10px',
items : [
{
xtype : 'textfield',
name : 'userInfo.userPwd',
id : 'userNames',
fieldLabel : '原密码'
},
{
xtype : 'textfield',
name : 'Pwd',
id : 'userPwds',
fieldLabel : '新密码'
},
{
xtype : 'textfield',
name : 'Pwds',
id : 'concreterights',
multiSelect : true,
fieldLabel : '新密码'
},
{
xtype : 'button',
width : 80,
id : 'update',
text : '修改',
handler : function(button) {
button.ownerCt
.getForm()
.submit(
{
url : '/copyright3/userInfoAction/updatepassword.action',
method : 'POST',
success : function(
response) {
Ext.Msg
.alert(
"温馨提示",
"密码修改成功");
var add = Ext
.getCmp("password")
add.hide();
}
});
}
} ]
} ]
});
var obj = [ {
name : 'userid',
type : 'integer',
sortable : true
},
{
name : "userName",
type : "string",
sortable : true
}, {
name : "userPwd",
type : "string",
sortable : true
}, {
name : "department",
type : "string",
sortable : true
}, {
name : "boolvalid",
type : "string",
sortable : true
}, {
name : "concreteright",
type : "string",
sortable : true
}, {
name : "beizhu",
type : "string",
sortable : true
} ];
var stores = new Ext.data.JsonStore( {
url : "/copyright3/userInfoAction/queryUserInfo.action",
type : 'json',
root : 'root',
fields : obj
});
var quanxian = new Ext.Window( {
id : 'quanxian',
name : 'quanxian',
title : '权限设置',
layout : 'border',
height : 500,
width : 800,
closeAction : 'hide',
items : [ {
// layout:'table',
xtype : 'grid',
region : 'center',
collapsible : false,
id : "quanxianGrid",
name : "quanxianGrid",
sm : new Ext.grid.RowSelectionModel( {
singleSelect : true
}),
store : stores,
multiSelect : true,
tbar : [ {
xtype : 'button',
text : '增加',
iconCls : 'table_add',
id : 'find',
handler : function() {
}
}, {
xtype : 'button',
text : '修改',
iconCls : 'table_edit',
id : 'upload',
handler : function(grid, rowIndex, colIndex) {
}
}, {
xtype : 'button',
text : '删除',
iconCls : 'table_remove',
id : 'ss',
handler : function(grid, rowIndex, colIndex) {
}
}, {
xtype : 'button',
text : '刷新',
iconCls : 'table_refresh',
id : 'printin',
handler : function(grid, rowIndex, colIndex) {
var grid = Ext.getCmp("quanxianGrid");
var store = grid.getStore();
store.load();
}
} ],
columns : [ {
header : "姓名",
width : 100,
sortable : true,
dataIndex : 'userName'
}, {
header : "所在部门",
width : 200,
sortable : true,
dataIndex : 'department'
}, {
header : "有效",
width : 100,
sortable : true,
dataIndex : 'boolvalid'
}, {
header : "模块权限",
width : 100,
sortable : true,
dataIndex : 'concreteright'
}, {
header : "备注",
width : 250,
sortable : true,
dataIndex : 'beizhu'
} ]
} ],
buttons : [ {
text : '关闭',
handler : function() {
quanxian.hide();
},
minWidth : 100
} ]
});
var viewport = new Ext.Viewport(
{
layout : 'border',
renderTo : "form1",// 呈现
items : [
{
xtype : "panel",
region : "north",
id : 'ss',
height : 30,
tbar : [ '->', {// 展开搜索菜单
text : "修改密码",
xtype : 'button',
width : 100,
id : 'newword',
handler : function() {
password.show();
}
}, {
text : '权限设置',
xtype : 'button',
width : 100,
handler : function() {
quanxian.show();
}
}, {
text : '退出',
xtype : 'button',
width : 100,
handler : function() {
window.close();
}
} ]
},
{
region : 'west',// 菜单
collapsible : true,
width : 200,
id : 'tree',
split : true,
title : '系统导航菜单',
xtype : 'treepanel',
hrefTarget : 'mainContent',
root: {
nodeType: 'async'
},
// auto create TreeLoader
dataUrl: 'backstage/data.json',
rootVisible : false,
tbar : [
{// 展开搜索菜单
text : "全部展开",
icon : "/copyright2/backstage/images/accept.png",
handler : function() {
Ext.getCmp("tree")
.expandAll();
}
},
{
text : "全部收缩",
icon : "/copyright2/backstage/images/add.png",
handler : function() {
Ext.getCmp("tree")
.collapseAll();
}
} ],
listeners : {// 树的监听器
'click':function(node, event) {
if(node.text== "音乐信息管理"){
addTab("id1","音乐信息管理", "/copyright3/music/music.jsp");
}
if(node.text == "音乐旧表信息管理"){
addTab("id20","音乐旧表信息管理", "/copyright2/backstage/music/jiumusic.jsp");
}
if(node.text=="音乐查询管理"){
addTab("id2","音乐查询管理","/copyright2/backstage/music/Listmusic.jsp");
}
if(node.text=="片名信息"){
addTab("id3","片名信息","/copyright2/backstage/music/rights.jsp");
}
if(node.text=="监播登记查询管理"){
addTab("id13","监播登记查询管理","/copyright2/backstage/music/Listrights.jsp");
}
if(node.text=="监播登记上传管理"){
addTab("id14","监播登记上传管理","/copyright2/backstage/music/jianbo.jsp");
}
if(node.text=="采购音乐池"){
addTab("id5","采购音乐池","/copyright2/backstage/music/musicpool.jsp");
}
if(node.text=="采购音乐池查询"){
addTab("id6","采购音乐池查询","/copyright2/backstage/music/Listmusicpool.jsp");
}
if(node.text=="年度栏目查重统计"){
addTab("id19","年度栏目查重统计","/copyright2/backstage/music/chachong.jsp");
}
if(node.text=="全年使用记录统计"){
addTab("id7","全年使用记录统计","/copyright2/backstage/music/statistics.jsp");
}
if(node.text=="付费全年使用记录统计"){
addTab("id8","付费全年使用记录统计","/copyright2/backstage/music/payflagstatistics.jsp");
}
if(node.text=="作曲者全年使用记录统计"){
addTab("id9","作曲者全年使用记录统计","/copyright2/backstage/music/musicauthorpersonal.jsp");
}
if(node.text=="作词者全年使用记录统计"){
addTab("id12","作词者全年使用记录统计","/copyright2/backstage/music/lyricpersonal.jsp");
}
if(node.text=="其他信息"){
addTab("id11","其他信息","/copyright2/backstage/music/movie.jsp");
}if(node.text=="修改合同确认单信息"){
addTab("id16","修改合同确认单信息","/copyright2/backstage/music/querendan.jsp");
}
if(node.text=="恢复合同确认单信息"){
addTab("id17","恢复合同确认单信息","/copyright2/backstage/music/Contractannex.jsp");
}
if(node.text=="特殊版权到期提醒"){
addTab("id18","特殊版权到期提醒","/copyright2/backstage/music/tixing.jsp");
}
if(node.text=="电视版权到期提醒"){
addTab("id21","电视版权到期提醒","/copyright2/backstage/music/banquan.jsp");
}
if(node.text=="网络版权到期提醒"){
addTab("id22","网络版权到期提醒","/copyright2/backstage/music/wangluo.jsp");
}
if(node.text=="音乐上传管理"){
addTab("id23","音乐上传管理","/copyright2/backstage/music/guanli.jsp");
}
}
}
} ,{
region : 'center',
title:"信息展示区域",
id : "tab",
xtype:'tabpanel'
}]
});
});
//动态添加标签
function addTab(tarid, tabTitle, targetUrl) {
Ext.getCmp('tab').removeAll(true);
var itemId = null;
Ext.getCmp('tab').items.each(function(item) {
if (item.getId() == tarid) {// 如果存在面板
itemId = item.getId();
}
});
if (itemId == null) {
itemId = tarid;
Ext.getCmp("tab").add({
id : tarid,
title : tabTitle,
html : "<iframe name='ifm' src="
+ targetUrl
+ " frameborder='0' scrolling='auto' width='100%' height='100%'></iframe>",
closable : true
});
}
// 显示该界面
Ext.getCmp("tab").setActiveTab(tarid);
}
页面左边的树结构需要引用一个json文件:
[{
text: '音乐管理',
cls: 'folder',
children: [ {
text : '音乐信息管理',
leaf : true
},{
text : '音乐旧表信息管理',
leaf : true
}, {
text : '音乐查询管理',
leaf : true
}, {
text : '采购音乐池',
leaf : true
}, {
text : '采购音乐池查询',
leaf : true
}, {
text : '全年使用记录统计',
leaf : true
}, {
text : '年度栏目查重统计',
leaf : true
},{
text : '付费全年使用记录统计',
leaf : true
},{
text : '作曲者全年使用记录统计',
leaf : true
},{
text : '作词者全年使用记录统计',
leaf : true
}]
},{
text: '监播登记管理',
cls: 'folder',
children: [{
text : '监播登记上传管理',
leaf : true
},{
text : '监播登记查询管理',
leaf : true
}]
},{
text: '电影查询',
cls: 'folder',
children: [{
text : '片名信息',
leaf : true
}, {
text : '其他信息',
leaf : true
}]
},{
text: '确认单信息',
cls: 'folder',
children: [{
text : '修改合同确认单信息',
leaf : true
}, {
text : '恢复合同确认单信息',
leaf : true
}]
},{
text: '特殊版权到期提醒',
cls: 'folder',
children: [{
text : '特殊版权到期提醒',
leaf : true
},{
text : '电视版权到期提醒',
leaf : true
},{
text : '网络版权到期提醒',
leaf : true
}]
}]
在3.4中有些方法4.0是不能用的,例如树的监听器 'click':function(node, event) ,在4.0中应该写成itemclick: function(n,record, item, index, e, eOpts),
为此纠结了好半天,今天就写到这,在权限管理那块还没有写完。以后会补上。