• extjs viewport panel tabPanel tree


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

    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,
               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
           ]
    
       });
    });
  • 相关阅读:
    http协议(二、报文格式)
    http协议(一、基础部分)
    echarts双轴轴线不对齐的解决办法
    svn 强制解锁的解决办法
    分析器错误
    JQgrid for asp.net
    养生宝典,值得一读(健康养生)
    ORM框架是什么
    WebSite和WebApplication的区别
    MVC3和MVC4相关问题
  • 原文地址:https://www.cnblogs.com/kunpengit/p/2445295.html
Copyright © 2020-2023  润新知