zoukankan      html  css  js  c++  java
  • 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
           ]
    
       });
    });
  • 相关阅读:
    Centos7下thinkphp5.0环境配置
    win10蓝牙鼠标无法连接,需pin码
    thinkphp5自带workerman应用
    php文件加密(screw方式)
    centos修改ssh默认端口号的方法
    修改CentOS ll命令显示时间格式
    在线编辑器的原理简单示例
    [转载]提升SQLite数据插入效率低、速度慢的方法
    linux 客户机挂载vitualbox共享文件夹
    virtualbox linux客户机中安装增强功能包缺少kernel头文件问题解决
  • 原文地址:https://www.cnblogs.com/kunpengit/p/2445295.html
Copyright © 2011-2022 走看看