ExtTree与ExtTab结合的时候经常会出现点击左边Tree动态切换右边Tab,并且Tab内容也会改变的问题,下面我说的是例子是这样的
整个侧边栏有两颗树:
第一棵树,点击时切换到它对应的Tab页,这个Tab页内容是ExtGrid,并且点击树节点时Tab内容会动态改变
第二棵树,点击时切换到它对应的Tab页,这个Tab也内容是iframe嵌入的页面,点击子节点也会动态改变Tab内容
侧重讲的是切换 【 tabPanel.setActiveTab(diagrampanel);】和Grid内容的动态改变
代码如下
===================这是第一棵树=====================================
var treepanel = new Tree.TreePanel( {
rootVisible : true, // 设为false将隐藏根节点,很多情况下,我们选择隐藏根节点增加美观性
border : true, // 有边框
animate : true, // 动画效果
autoScroll : true, // 自动滚动
containerScroll : true,
loader : treeloader,
useArrows : true,
checkModel : 'cascade', // 对树的级联多选
onlyLeafCheckable : false,
listeners:{
click:function(node,e){
var docpanel = tabPanel.getComponent("docpic");//这里获取TabPanel里面与之对应的Tab
tabPanel.setActiveTab(docpanel);
if(node.text=="文档"){
return ;
}
searchFn(node.attributes.id)//这里我用来动态改变Grid的内容
}
}
});
var rootnode = new Tree.AsyncTreeNode( {
id : 'cate_root',
text : '文档',
draggable : false,
url:path+'ExtJsp/about.jsp'
});
treepanel.setRootNode(rootnode);
treepanel.on('beforeload', function(node) {
treepanel.loader.dataUrl = path+'tree/displayDocTree.action?id=' + node.id;
});
//改变Grid内容的方法,其实与带搜索框的Grid产生的效果一样,就是传递最基本的参数
function searchFn(CId) {
// 获取Grid
var grid = Ext.getCmp("docGrid");
if(grid == null) {
Ext.MessageBox.show({
title: '提示信息',
msg: '找不到列表控件!',
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.ERROR
});
return;
}
// 获取Grid中的数据存储
var store = grid.store;
if(store == null) {
Ext.MessageBox.show({
title: '提示信息',
msg: '找不到数据适配器!',
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.ERROR
});
return;
}
// 把数据加载到数据存储中
store.load({
// 传一些搜索参数
params:{
start: 0,
limit: 20
}
});
// 把参数保存到数据存储中(把上面除了start和limit不复制之外,把全部复制下来就可以了)
store.on('beforeload',function() {
Ext.apply(
this.baseParams,
{
CId:CId
});
});
}
=====================这是第二棵树=======================
var Tree1 = Ext.tree;
var treeloader1 = new Tree1.TreeLoader( {
dataUrl : path+"tree/displayDiagramTree.action?id='A1'"
});
var diagramtree = new Tree1.TreePanel( {
rootVisible : true, // 设为false将隐藏根节点,很多情况下,我们选择隐藏根节点增加美观性
border : true, // 有边框
animate : true, // 动画效果
autoScroll : true, // 自动滚动
containerScroll : true,
loader : treeloader1,
useArrows : true,
checkModel : 'cascade', // 对树的级联多选
onlyLeafCheckable : false ,
listeners:{
click:function(node,e){
var myUrl='<iframe width="100%" height="100%" frameborder=0 src=${base}/ExtJsp/diagrams/'+node.attributes.id+'.jsp></iframe>';
var diagrampanel = tabPanel.getComponent("diagrampic");
tabPanel.setActiveTab(diagrampanel);
if(node.text=="查看总图"){
return;
}else{
diagrampanel.body.dom.innerHTML=myUrl;//这里动态改变Tab的html内容
}
}
}
});
var rootnodee = new Tree1.AsyncTreeNode( {
id : 'diagram_root',
text : '查看总图',
draggable : false,
url:path+'ExtJsp/about.jsp'
});
diagramtree.setRootNode(rootnodee);
diagramtree.on('beforeload', function(node) {
diagramtree.loader.dataUrl = path+'tree/displayDiagramTree.action?id=' + node.id;
});
====================下面这个是TabPanel=================
var tabPanel = new Ext.TabPanel({//设置TAB选项
id:'p4',
height:570,//设置高度
//width:855,
activeTab:0,
animScroll:true,//可以滚动的
enableTabScroll:true,
layoutOnTabChange:true,
deferredRender:false,
html:'<img src="${base}/images/bg.jpg"/>',
items:[{title:'文档管理',
id:'docpic',
items:[docGrid]},
{title:'流程图',id:'diagrampic',html:'<iframe width=100% height=100% frameborder=0 src="${base}/ExtJsp/diagrams/b15228b7-53a8-11df-bcda-86f3311bf26f.jsp"></iframe>'}],
listeners:{
tabchange : function(tab,panel){
//alert(panel.title);
//tab.remove(panel);
}
}
});