extjs viewport panel tabPanel tree

最新推荐文章于 2018-07-01 13:49:10 发布

weixin_33712881

最新推荐文章于 2018-07-01 13:49:10 发布

阅读量93

点赞数

本文展示了一个使用ExtJS框架创建的菜单与Tab面板交互示例。通过TreePanel实现左侧菜单，点击不同菜单项时，Tab面板加载相应的内容。此示例采用iframe加载外部页面的方式实现了内容的动态加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本代码所展示出来的的是如下图所示：

Ext.onReady(function(){
Ext.QuickTips.init();
     var tree=new   Ext.tree.TreePanel({
    //   el:"tree"
   });

    var root=new Ext.tree.TreeNode({text:'项目信息'});
    var node1=new Ext.tree.TreeNode({
        id:'node1',
        text:"项目资料"

    });
    var node2=new Ext.tree.TreeNode({
        id:'node2',
        text:'标段信息'

    });
    var node3=new Ext.tree.TreeNode({
        id:'node3',
        text:"合同清单"

    });
    var node4=new Ext.tree.TreeNode({
        id:'node4',
        text:"形象清单"
      
    });
    root.appendChild(node1);
    root.appendChild(node2);
    root.appendChild(node3);
    root.appendChild(node4);
    tree.setRootNode(root);

    tree.on("click",function(node){
        
       /* var text=node.text;
        var mainPanel=Ext.getCmp("main"); //中间主Panel
        var url="";
        if(text=="项目信息") url="1.jsp";
        if(text=="项目资料") url="1.jsp";
        if(text=="标段信息") url="2.jsp";
        if(text=="合同清单") url="3.jsp";
        if(text=="形象清单") url="4.jsp";
     
        mainPanel.load({
            url:url,
            nocache:true,
            text:"正在加载中......",
            timeout:30,
            scripts:true 
        });*/
            var n;
            n = tabPanel.getComponent(node.id);
            if(n) {
                tabPanel.setActiveTab(n);
                return;
            }
            n = tabPanel.add( {
                id : node.id,
                title : node.text,
                html : '<iframe style="border:0" width=100% height=100% src=' + node.id + '.jsp'+' />',
                closable : 'true'
            });
            tabPanel.setActiveTab(n);
        
        
    });
 
    var tabPanel = new Ext.TabPanel({
            region:"center",
               plit:true,
               border:true,
               id:"main",
            enableTabScroll : true,
            deferredRender : false,
            activeTab : 0,
            items : [ {
                title : 'index',
                autoLoad : 'list.jsp'
                }]
            });
    
    var accordion = new Ext.Panel({
        title:'系统菜单',
        region:"west",
           collapsible:true,
           width:200,
           layout:"accordion",
           layoutConfig:{
               titleCollapse:true,
               animate:true,
               activeOnTop:false
                },
    items:[{
               title:"第一栏",
               items:[tree]
           },{
               title:"第二栏"
           },{
               title:"第三栏"
           }]
    
    });
    
   var viewport=new Ext.Viewport({
           enableTabScroll:true,
           layout:"border",
           items:[
               accordion,
              tabPanel
       ]

   });
});