ExtJS项目框架有关问题讨论
之前在博客园里看到过殷良胜写的一个综合项目案例，后来我改装了一下，见效果如下：
自己感觉效果还可以，满足业务需求还行；但毕竟是改装别人的代码，有些代码还是搞不懂，所以就出现一些技术问题。比如说，点击左侧的菜单，右边的TabPanel上是显示出来了，但是在关闭的时候出现了问题；如果从右边一个一个的关闭没有问题，但是如果从中间或者前面第一个开始关闭，那么最右边的选项卡，就丢失数据，出现空白页：如下图所示：
，就这个问题，我曾经问过那位博主，可是杳无音信；不知哪位大侠能否指点一二，小弟不胜感激！
脚本代码如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Main.aspx.cs" Inherits="FGPS3._0.WebPages.Main" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>资金收付系统</title>
<style type="text/css">
html, body {
font:normal 12px verdana;
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}
.x-panel-body p {
margin:5px;
}
.x-column-layout-ct .x-panel {
margin-bottom:5px;
}
.x-column-layout-ct .x-panel-dd-spacer {
margin-bottom:5px;
}
.settings {
background-image:url(../shared/icons/fam/folder_wrench.png) !important;
}
.nav {
background-image:url(../shared/icons/fam/folder_go.png) !important;
}
.panel_icon
{
background-image: url(images/first.gif);
}
.win_icon
{
background-image: url(images/05503711.gif);
}
.template
{
background-image: url(images/myBBImg.PNG);
}
.center_icon { background-image:url(images/first.gif)}
</style>
<link rel="Stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css" />
<link rel="Stylesheet" type="text/css" href="ExtJS/resources/css/xtheme-green.css" />
<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ExtJS/ext-all.js"></script>
<script type="text/javascript" src="js/theme.js"></script>
<script type="text/javascript" src="js/bottom.js"></script>
<script type="text/javascript" src="js/rightKeyTabPanel.js" ></script>
<script src="js/centerGrid.js" type="text/javascript"></script>
<script src="Scripts/SystemManagement/FunGroupManage.js" type="text/javascript" language="javascript" charset="GBK"></script>
</head>
<body>
<form id="form1" runat="server">
<img id="headImg" src="images/header22.png" alt="欢迎使用资金收付系统"/>
<div>
<script type="text/javascript">
Ext.QuickTips.init();
function BuildTree() {
//上面
var toolbar = new Ext.Toolbar
({
border: false, x: 0, y: 0, id: "toolbars",
items:
[
{
xtype: "tbbutton", text: "首页", id: "btnEnter", icon: 'images/first.gif', cls: 'x-btn-text-icon',
listeners: { "click": function() { loadPanelWest("reload"); } }
}
]
});
var panel_toolbar = new Ext.Panel
({
border: false, x: 0, y: 0,
items: [toolbar]
});
var panel_north = new Ext.Panel
({
id: "panel_north", region: "north", contentEl: "headImg",
height: 100, frame: false, border: false,
items: [panel_toolbar]
});
//中间
var tabpanel = new Ext.TabPanel
({
activeTab: 0, autoWidth: true, border: false, frame: false, id: "TabPanelID", enableTabScroll: true,
items:
[
{
xtype: "panel", layout: 'fit', title: "首页", border: false, frame: false, iconCls: 'panel_icon',
html: "<iframe scrolling='no' width='100%' height='100%' frameborder='0' src=''></iframe>"
}
]
});
var panel_center = new Ext.Panel
({
id: 'panleCenter', frame: false, border: false,
region: 'center',
split: true,
items: [tabpanel],
layout: 'fit'
});
//左面
var panel_west = new Ext.Panel
({
id: 'panWestMenu',
region: 'west',
split: true,
width: 200,
collapsible: true,
margins: '0 0 0 0',
layout: 'accordion',
layoutConfig: { animate: true }
});
var viewport = new Ext.Viewport
({
id: 'vpMain',
layout: 'border',
items:
[
panel_north,
panel_center,
panel_west,
Ext.getCmp("BottomPanelID")
]
});
//加载左面的数据
var loadPanelWest = function(init) {
Ext.Ajax.request
({
url: 'json/TreeJson.aspx?Param=0',
success: function(response, options) {
try {
//找到左面的面板
var panWestMenu = Ext.getCmp("panWestMenu");
//清除左部面板拥有的子面板
if (panWestMenu) {
var children = panWestMenu.findByType('panel');
if (children) {
for (var i = 0, len = children.length; i < len; i++) {
panWestMenu.remove(children[i], true);
}
}
}
//获取顶部工具栏
var toolBars = Ext.getCmp("toolbars");
//获取一级栏目菜单信息
var menusArray = Ext.util.JSON.decode(response.responseText);
for (var j = 0; j < menusArray.length; j++) {
//根据标题和ID信息创建树的面板
var mp = CreateMenuPanel(menusArray[j].TypeTitle, menusArray[j].TypeID);
//将一个一个的一级栏目菜单加载到左部的面板上去
panWestMenu.add(mp);
//如果初始的时候，将此一级菜单以按钮的形式添加到顶部的工具栏上
if (init == "load") {
//根据标题和ID，创建Ext.Toolbar.button对象，并添加到顶部的工具栏上
var tempBtn = CreteButton(menusArray[j].TypeTitle, menusArray[j].TypeID);
toolBars.addItem(tempBtn);
}
}
panWestMenu.doLayout();//doLayout()方法，是Ext.Panel对象的自有方法
if (init == "load") {
toolBars.addFill();
toolBars.addSeparator();
toolBars.addText("更换皮肤 ");
toolBars.addItem(new makeCookie().cbThemes);
panel_north.doLayout();
}
}
catch (e) {
}
}
});
};
loadPanelWest("load");
//创建单个treePanel
var CreateMenuPanel = function(title, TypeID) {
return new Ext.Panel
({
title: title, layout: 'fit', border: false, frame: true,
items:
[{
xtype: 'treepanel', singleExpand: true, animate: true, autoScroll: true, containerScroll: true,
border: false,
width: 200, height: 370, enableDD: false, dropConfig: { appendOnly: true },
loader: new Ext.tree.TreeLoader({ dataUrl: "json/TreeJson.aspx?Param=1" }),
root: new Ext.tree.AsyncTreeNode
({
id: TypeID,
text: title,
draggable: false,
expanded: true
})
, listeners: { "click": function(node, e) {
if (typeof node.attributes.TypeID == "undefined") {
//Ext.Msg.alert("提示消息","不可以对根节点执行右键操作！");
return;
}
var _TypeID = node.attributes.TypeID;
var _TypeTitle = node.attributes.TypeTitle;
var _TypeEName = node.attributes.TypeEName;
var tabs = Ext.getCmp("TabPanelID");
var title = _TypeTitle;
for (var i = 0; i < tabs.items.length; i++) {
if (tabs.items.items[i].title == title) {
//Ext.Msg.alert("消息","该菜单项[ " + node.attributes.text + " ]已经存在Tab里面！");
tabs.activate(tabs.items.items[i]);
return;
}
}
if (_TypeID == '28' && title == '功能授权管理') {
var pnl = new BuildGridView(_TypeID, title).gridView;
tabs.add(pnl);
tabs.activate(pnl);
} else if (_TypeID == '29' && title == '功能组授权管理') {
var pnl = new FunGroupManageBuildGridView(_TypeID, title).gridView;
tabs.add(pnl);
tabs.activate(pnl);
} else if (_TypeID == '27' && title == '账户授权管理') {
var pnl = new FunGroupManageBuildGridView(_TypeID, title).gridView;
tabs.add(pnl);
tabs.activate(pnl);
}
}
}
}]
});
};
//创建单个按钮
var CreteButton = function(MenuTitle, MenuID) {
return new Ext.Toolbar.Button
({
id: "MenuID" + MenuID, text: MenuTitle, icon: 'images/plugin.gif', cls: 'x-btn-text-icon',
tooltip: MenuID,
listeners:
{
"click": function(o, e) {
//获取西部面板
var panWestMenu = Ext.getCmp('panWestMenu');
//获取顶部的工具栏
var toolbars = Ext.getCmp('toolbars');
//获取北部面板
var panel_north = Ext.getCmp('panel_north');
if (toolbars && toolbars.items.length > 0) {
for (var i = 0; i < toolbars.items.length; i++) {
if (toolbars.items.items[i].id == o.id) {
toolbars.items.items[i].pressed = true;
}
else {
toolbars.items.items[i].pressed = false;
}
}
}
if (panWestMenu) {
var children = panWestMenu.findByType('panel');
if (children) {
for (var i = 0, len = children.length; i < len; i++) {
panWestMenu.remove(children[i], true);
}
}
var mp = CreateMenuPanel(o.text, o.tooltip);
panWestMenu.add(mp);
panWestMenu.doLayout();
}
}
}
});
};
}
</script>
<script type="text/javascript">
function ready() {
makeCookie();
BuildBottomPanel();
BuildTree();
RightKeyTabPanel();
}
Ext.onReady(ready);
</script>
</div>
<div id="tree-div"></div>
</form>
</body>
</html>
补充，文中红色字体部分为处理代码；如果出问题，可能出在这里！那出问题的根本原因在哪里呢？
