Ext之Tree与Tab组合问题

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); 
              
         } 
     } 
   });