左侧选项卡如何实现?
Extjs

解决方案 »

  1.   

    这个,没做过,不过,我估计就是用toolbar工具条来做的吧
      

  2.   

    <%@ page language="java" import="java.util.*" pageEncoding="gbk"%><html>
    <head>
    <script type="text/javascript" src="jQuery1.6.1/jquery-1.6.min.js"></script>
    <script type="text/javascript" src="ext-3.4.0/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext-3.4.0/ext-all.js"></script>
    <link rel="stylesheet" href="ext-3.4.0/resources/css/ext-all.css"
    type="text/css"></link>
    <script type="text/javascript" src="ext-3.4.0/gridToExcel.js"></script>
    <script type="text/javascript"
    src="ext-3.4.0/ext-lang-zh_CN-GBK-min.js"></script> <script type="text/javascript">
    //左边功能树
    var menuTree = new Ext.tree.TreePanel({
    region:'west',
    title:'功能菜单',
    width:180,
    minSize:150,
    maxSize:200,
    split:true,
    autoScroll:true,
    autoHeight:false,
    collapsible:true,
    rootVisable:false, //不显示根节点
    root:new Ext.tree.TreeNode({
       id:'root',
       text:'功能菜单',
       draggable:false,
       expanded:true
    })
    });
    //添加第一个节点(html)
    menuTree.root.appendChild(new Ext.tree.TreeNode({
    id:'htmlPanel',
    text:'通过html打开',
    listeners:{
       'click':function(node, event) {
          event.stopEvent();
          var n = contentPanel.getComponent(node.id);
          if (!n) { //判断是否已经打开该面板
             n = contentPanel.add({
                'id':node.id,
                'title':node.text,
                closable:true, //通过html载入目标页
                html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="iframe.html"></iframe>'
             });
          }
          contentPanel.setActiveTab(n);
       }
    }
    }));
    //添加第二个节点(autoLoad)
    menuTree.root.appendChild(new Ext.tree.TreeNode({
    id:'autoLoadPanel',
    text:'通过autoLoad打开',
    listeners:{
       'click':function(node, event) {
          event.stopEvent();
          var n = contentPanel.getComponent(node.id);
          if (!n) { ////判断是否已经打开该面板
             n = contentPanel.add({
                'id':node.id,
                'title':node.text,
                closable:true,
                autoLoad:{url:'auto.php', scripts:true} //通过autoLoad属性载入目标页,如果要用到脚本,必须加上scripts属性
             });
          }
          contentPanel.setActiveTab(n);
       }
    }
    }));
    //右边具体功能面板区
    var contentPanel = new Ext.TabPanel({
    region:'center',
    enableTabScroll:true,
    activeTab:0,
    items:[{
       id:'homePage',
       title:'首页',
       autoScroll:true,
       html:'<div style="position:absolute;color:#ff0000;top:40%;left:40%;">Tree控件和TabPanel控件结合功能演示</div>'
    }]
    });
    var contentPanel2 = new Ext.TabPanel({
    height:'auto',
    region:'center',
    enableTabScroll:true,
    activeTab:0,
    items:[{
    id:'homePage2',
    title:'交互服务',
    autoScroll:true,
    html:'<div id="div2" style="position:absolute;color:#ff0000;top:40%;left:40%;"><a>234234</a></div>'
    }]
    });
    Ext.onReady(function(){
    new Ext.Viewport({
    layout:'border', //使用border布局
    defaults:{activeItem:0},
    items:[menuTree,contentPanel],
    applyTo:'right1'
    });
    })
    $(function(){
    $("#r2").hide();
    })

    </script>
    <style type="text/css">
    #main {
    width: 100%;
    height: 100%;
    }#left1 {
    float: left;
    width: 1.5%;
    height: 100%;
    }#right1,#r2 {
    float: left;
    width: 98.5%;
    height: 100%;
    }
    </style>
    </head>
    <body>
    <div id="main">
    <div id="left1">
    <a id="test1">测试</a>
    <a>--</a>
    <a id="test2">测试2</a>
    </div>
    <div id="right1"></div>
    <div id="r2"></div>
    </div>
    </body>
    <script type="text/javascript">
    $("#test1").click(function(){
    alert("1");
    $("#right1").show();
    $("#r2").hide();
    $(this).css("color","#ff0000");
    $("#test2").css("color","black");
    })
    $("#test2").click(function(){
    alert("2");
    $("#right1").hide();
    $("#r2").show();
    $(this).css("color","#ff0000");
    $("#test1").css("color","black");
    })
    </script>
    </html>
    为什么我把Viewport指定到applyTo:'right1'页面就变形了