最近因爲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)，
爲此糾結了好半天，今天就寫到這，在權限管理那塊還沒有寫完。以後會補上。
