请教yourgame^_^
yourgame你好，
在你共享的“图书管理系统”中，ViewPort采用了border的布局方式(layout:'border')，
其中viewport中的west部分作为“菜单区”，
center部分作为“工作区”，
通过点击左边的某个菜单项，会在工作区内显示对应的操作界面，
同时工作区你采用的是card的布局方式(layout:'card')，
如此，只能够在工作区同一时刻显示一个交易画面（items:[start, p_company, p_user, p_dept, p_duty, p_subject, p_category, p_book, p_simple_book] 中的任意一个），
现在我想将“工作区”修改为tabpanel的布局方式，也就是达到如下效果——点击菜单，在工作区显示对应交易的画面panel，
如下图所以：
[img]E:/未命名2.bmp[/img]
我现在遇到的问题是，无法将原来的交易面板放入点击菜单后弹出的对应tabs中去！就像图中所示一样，弹出来的是空白的tabs:(
对“图书管理系统”中 main.js代码的调整如下（你可以直接查找“chg by”字样的地方）：
Ext.BLANK_IMAGE_URL = 'lib/ext/resources/images/default/s.gif';
Ext.QuickTips.init();
var start = {
id : 'start-panel',
title : '欢迎使用',
layout : 'fit',
bodyStyle : 'padding:25px',
html : '
'
};
Ext.onReady(function() {
setTimeout(function(){
/* 清除显示加载信息的div标记 */
Ext.get('loading').remove();
/* visible 使要素可以被看见
* hidden 使要素被隐藏
* inherit 指它将继承母体要素的可视性设置。
* 值 inherit 为缺省值。这使单元继承父单元的可见性。所以，如果某一段是隐藏的，则它包含的任何行间单元也都被隐藏。这一继承性可被明确指定的可见性取代。*/
Ext.getDom('header').style.visibility = 'visible';
/* 开始创建界面视图——程序可视区域
* 一个页面上只允许存在一个viewport */
var vp = new Ext.Viewport({
layout : 'border',
defaults : {
collapsible : true,
split : true
},
items : [{
xtype : 'box',
region : 'north',
applyTo : 'header',
height : 30,
split : false
}, {
xtype:'panel',
title : currentUser,
id : 'accordion-panel',
layout : 'border',
region : 'west',
baseCls:'x-plain',
margins : '2 0 5 5',
width : 200,
minSize : 200,
maxSize : 250,
bodyStyle : 'background-color:#DFE8F6',
defaults : {
border : false
},
bbar : [{
text : '开始',
iconCls : 'icon-plugin',
menu : new Ext.menu.Menu({
items : [{
text : '关于系统',
iconCls : 'icon-info',
handler : function() {
new Ext.Window({
closeAction : 'close',
resizable : false,
bodyStyle : 'padding: 7',
modal : true,
title : '关于本系统',
html : '本系统采用目前较为流行的技术实现,<br>前台使用了ExtJs技术,所以实现了跨浏览器<br>' +
'本程序在IE6,IE7,FireFox3均测试通过!<br><br>主要技术: Struts2 + Spring2.5 + iBatis2.3 + ExtJs2.2<br><br>'
+ '数 据 库: Microsoft SQL Server 2000',
width : 300,
height : 200
}).show();
}
}, {
text : '退出系统',
iconCls : 'icon-delete',
handler : function() {
Ext.Msg.confirm('操作提示', '您确定要退出本系统?', function(yorn) {
if ('yes' == yorn) {
Ext.Ajax.request({
url : 'logout.action',
success : function() {
location = '/bmsh/index.jsp';
},
failure : function() {
Ext.Msg.show({
title : '错误提示',
msg : '退出系统失败!',
icon : Ext.Msg.ERROR,
buttons : Ext.Msg.OK
});
}
});
}
});
}
}]
})
}],
items : [{
layout : 'accordion',
region : 'center',
items : [{
title : '导航菜单',
iconCls : 'icon-nav',
border : false,
items : [{
xtype : 'treepanel',
border : false,
rootVisible : false,
autoScroll : true,
loader : new Ext.tree.TreeLoader({
//根据界面勾选manager的值选择菜单项
dataUrl : nav == 'manager'
? 'js/tree-data-manager.json'
: nav =='mine'
?'js/tree-data-mine.json'
:'js/tree-data-simple.json'
}),
root : new Ext.tree.AsyncTreeNode(),
listeners : {
/* chg by megaecho 20090521
* 用tabPanel布局方式实现 菜单调出 工作区 交易界面
* 'click' : function(n) {
try {
//如果点击子叶点，则驱动显示相应的交易界面
//如何判定本次点击的node为原有的node呢？ 就是不想重新加载页面。
var sn = this.selModel.selNode || {};// 方法:取原选定的node
if (n.leaf && n.id != sn.id) {
//Ext.Msg.alert("你点击了："+n.id+"["+n.id.substring(0, n.id.indexOf('-'))+'-panel'+"]");
// 根据选中的菜单拼出panel，并指定载入到ViewPort中id为content-panel的标记
// 也就是将交易界面载入 region=center区域——指定活动items
Ext.getCmp('content-panel').layout.setActiveItem(n.id.substring(0, n.id
.indexOf('-'))
+ '-panel');
}
} catch (e) {
}
}*/
'click' : function(n){
//panel的命名规则：panel+'-panel'
var treePanelId = n.id.substring(0, n.id
.indexOf('-'))
+ '-panel';
//检查TabPanel（content-panel）中是否已经打开了id为treePanelId的panel
//无，则新建panel并且id为treePanelId
var tabTmp = Ext.getCmp('content-panel').getItem(treePanelId);
if(tabTmp==null){
alert("新打开"+treePanelId+"panel");
Ext.getCmp('content-panel').add({
xtype:'panel',
title: n.text,
id:treePanelId,
closable:true
}).show();
}else{
alert("panel"+treePanelId+"已经被打开，跳回已经打开的panel去");
alert(treePanelId+"has been created.....");
Ext.getCmp('content-panel').setActiveTab(tabTmp);
}
}
}
}]
}]
}]
},
/*
* chg by megaecho 20090521
* 用tabPanel布局方式实现 菜单调出 工作区 交易界面
{
id : 'content-panel',
region : 'center',
layout : 'card',
margins : '2 5 5 0',
activeItem : 0,
border : false,
//以下items定义了中间区域包含的交易界面（类），并且按照顺序进行载入 ，默认载入第一个，此处也就是先载入 start
items : [start, p_company, p_user, p_dept, p_duty, p_subject, p_category, p_book, p_simple_book]
}*/
{
title:'操作区域',
id:'content-panel',
region:'center',
xtype:'tabpanel',
margins : '0 1 1 0',
activeItem : 0,
border : false,
autoTabs : false,
hideCollapseTool :true ,
items:[start, p_company, p_user, p_dept, p_duty, p_subject, p_category, p_book, p_simple_book]
}]
});
}, 250);
});
希望这次表述清楚了，并且能得到你的帮助！谢谢！
[b]问题补充：[/b]
[code="java"]
'click' : function(n){
if( n.leaf ){
var treePanelId = n.id.substring(0, n.id.indexOf('-'))+'-panel';
var tabPanelTmp = Ext.getCmp('content-panel');
var tabTmp = tabPanelTmp.getItem(treePanelId);
if(tabTmp==null){
alert("新打开"+treePanelId+"panel");
/* 使用if..elseif 判断菜单对应的交易界面，并调出——成功*/
if( n.id == 'book-manage' ){
tabPanelTmp.add(p_book).show();
}else if( n.id == 'company-manage'){
tabPanelTmp.add(p_company).show();
}else if( n.id == 'dept-manage'){
tabPanelTmp.add(p_dept).show();
}else if( n.id == 'user-manage'){
tabPanelTmp.add(p_user).show();
}else if( n.id == 'duty-manage'){
tabPanelTmp.add(p_duty).show();
}else if( n.id == 'subject-manage'){
tabPanelTmp.add(p_subject).show();
}else if( n.id == 'category-manage'){
tabPanelTmp.add(p_category).show();
}
/* [新问题]：将上面if elseif 代替如下,根据传入的节点n得到对应的'p_XXXX'这样的名字，
* 以获得对p_XXXX的调用，达到自动使用以后交易的增加.....
* 但是执行 tabPanelTmp.add( 'p_'+n.id.substring(0, n.id.indexOf('-')) ).show();
* 却不能得到效果
tabPanelTmp.add( 'p_'+n.id.substring(0, n.id.indexOf('-')) ).show();
*/
}else{
alert("panel"+treePanelId+"已经被打开，跳回已经打开的panel去");
Ext.getCmp('content-panel').setActiveTab(tabTmp);
}
}else{
//alert("非叶节点");
}
}
[/code]
[b]问题补充：[/b]
谢谢issppt的帮助！
更是感谢yourgame，耐心的指导！
问题暂时解决了！ 如你所说，我把p_xxxxx这些加入到新增加的panel对应的items参数中就ok了！
但是为了要根据点击菜单来选择对应的p_XXXX，我的做法相对死板
如下：
[code="java"]
'click' : function(n){
if( n.leaf ){
var treePanelId = n.id.substring(0, n.id.indexOf('-'))+'-panel';
var tabPanelTmp = Ext.getCmp('content-panel');
var tabTmp = tabPanelTmp.getItem(treePanelId);
if(tabTmp==null){
alert("新打开"+treePanelId+"panel");
[b]
/* 死板：使用if..elseif 判断菜单对应的交易界面，并调出——成功*/
[/b]
if( n.id == 'book-manage' ){
tabPanelTmp.add(p_book).show();
}else if( n.id == 'company-manage'){
tabPanelTmp.add(p_company).show();
}else if( n.id == 'dept-manage'){
tabPanelTmp.add(p_dept).show();
}else if( n.id == 'user-manage'){
tabPanelTmp.add(p_user).show();
}else if( n.id == 'duty-manage'){
tabPanelTmp.add(p_duty).show();
}else if( n.id == 'subject-manage'){
tabPanelTmp.add(p_subject).show();
}else if( n.id == 'category-manage'){
tabPanelTmp.add(p_category).show();
}
[b]
/* [新问题]：将上面if elseif 代替如下,根据传入的节点n得到对应的'p_XXXX'这样的名字，
* 以获得对p_XXXX的调用，达到自动使用以后交易的增加.....
* 但是执行 tabPanelTmp.add( 'p_'+n.id.substring(0, n.id.indexOf('-')) ).show();
* 却不能得到效果
tabPanelTmp.add( 'p_'+n.id.substring(0, n.id.indexOf('-')) ).show();
*/
[/b]
}else{
alert("panel"+treePanelId+"已经被打开，跳回已经打开的panel去");
Ext.getCmp('content-panel').setActiveTab(tabTmp);
}
}else{
//alert("非叶节点");
}
}
[/code]
[b]
现在想请教如何处理[新问题]？
[/b]
我想这个新问题关键还是自己对extjs没有理解所致，
对如下的代码段 的实质 和如何才能 引用未搞清楚！再次求教！
[code="java"]
var p_book = {
title:'图书信息管理',
id : 'book-panel',
border : false,
layout : 'fit',
closable:'true',
items : [book_panel]
}
[/code]
另外我通过网上的资料学习，掌握了向TabPanel中动态增加tabs的方法：
1.iframe方式
2.autoLoad方式
3.扩展Panel
资料连接：http://chenxueyong.iteye.com/blog/353371
大致能知道问题，应该是出在交易画面的panel的表单定义上，如果你把交椅画面的表单内容定义在外部，那么导致的情况是，所有的新生的tabpanel都是用是同一组表单元素，就会出现问题。
如果希望每点击一个结点，相应的tab中出现相应的交易表单，你应当在click事件中去把相应的交易表单拼接出来。
你可以试一下，因为没有看到你出错的图例，所以大致感觉是这个问题。
网上大把的示例呀。老大
[code="js"]
'click': function(n) {
var treePanelId = n.id.substring(0, n.id.indexOf('-')) + '-panel';
var tabTmp = Ext.getCmp('content-panel').getItem(treePanelId);
if (tabTmp == null) {
alert("新打开" + treePanelId + "panel");
Ext.getCmp('content-panel').add({
xtype: 'panel',
title: n.text,
id: treePanelId,
closable: true
}).show();
} else {
alert("panel" + treePanelId + "已经被打开，跳回已经打开的panel去");
alert(treePanelId + "has been created.....");
Ext.getCmp('content-panel').setActiveTab(tabTmp);
}
}
[/code]
我初步看了一下你的代码,你说打开的页面都是空白的,问题就在这个地方
当你打开新的tab页的时候每次都是下面的代码
[code="js"]
{
xtype: 'panel',
title: n.text,
id: treePanelId,
closable: true
}
[/code]
当然没有内容哦.我想你的意思是想打开其他的 "图书信息管理","部门管理","分公司管理"那些页面的内容.在我之前的代码中,这些页面的对象都是已经创建好了的.只是简单的控制他的显示而已.
所以你要把 items里面的p_company, p_user, p_dept, p_duty, p_subject, p_category, p_book, p_simple_book这些对象都在Ext.getCmp('content-panel').add()这个方法里面动态来创建.这样才能达到目的