TabPanel 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
   <!--  <script src="lib/extjs/vswd-ext_2.2.js" type="text/javascript"></script>-->
    <!--这个一定要加在第一行！-->
    <link href="lib/extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script src="lib/extjs/bootstrap.js" type="text/javascript"></script>
    <script src="lib/extjs/ext-all-debug.js" type="text/javascript"></script>
    <script src="lib/extjs/locale/ext-lang-zh_CN.js" type="text/javascript"></script>
      <script type="text/javascript">
          Ext.onReady(function () {
              /*
               *简单的树节点数据
               */
              var nodes = {
                  text: '日月神教',
                  expanded: true,
                  leaf: false,
                  children: [
                      {
                          id: 'boss',
                          text: '任我行',
                          leaf: true
                      },
                      {
                          id: 'gg',
                          text: '令狐冲',
                          leaf: true
                      },
                      {
                          id: 'mm',
                          text: '任盈盈',
                          leaf: true
                      }
                  ]
              };

              /**
              *这里是关键
              */
              var loadNodeInfo = function (node, e) {
                  //Ext.Msg.show("点击");
                  var id = node.attributes.id;
                  if (!id) {
                      Ext.Msg.alert('提示信息', '节点必须设置唯一的id');
                      return;
                  }
                  var comp = rightTab.getComponent(id);
                  if (!comp)
                  {
                      comp = new Ext.Panel({
                          id: id,
                          title: node.attributes.text || "",
                          html: node.attributes.text
                      });
                      rightTab.add(comp);
                  }
                  rightTab.setActiveTab(comp);
                  rightTab.scrollToTab(comp);    //???
              }

              /**
              *树面板
              **/
              var leftTree = new Ext.tree.TreePanel({
                  id: 'leftTree',
                  title: '左侧树',
                  region: 'west',
                  root: nodes,
                  width: 200,
                  autoScroll: true,
                  split: true,           //???
                  rootVisible: true,
                  collapsible: true,
                  listeners: { 'click': loadNodeInfo}
              });

              /***
              *右侧的tab
              */
              var rightTab = new Ext.TabPanel({
                  id: 'rightTab',
                  region:'center'
              });

              /****
              *viewPort
              */
              var vp = new Ext.Viewport({
                  layout: 'border',
                  items:[leftTree,rightTab]
              });
          });
        
      </script>
</head>
<body>

</body>
</html>

　

 

 

 

posted @ 2014-03-20 20:36  大漠孤烟~  阅读(223)  评论(0)    收藏  举报