ExtJs的tab

tab和tree的双剑合璧：

//首先定义一个tab

var tabs = new Ext.TabPanel( {
 resizeTabs : true,
 minTabWidth : 115,
 tabWidth : 135,
 enableTabScroll : true,
 width : '100%',
 height : 800,
 defaults : {
  autoScroll : true
 },
});

//然后定义一个tree

var tree = new Ext.tree.TreePanel({
  border:false,
     autoWidth: true,
     useArrows:true,
     autoScroll:true,
     animate:true,
     rootVisible: false,
     leaf:true,
  loader: new Ext.tree.TreeLoader({dataUrl: 'tree.json'}),
  root: {
            nodeType: 'async',
            listeners:{
             expand:function(){
           tree.getRootNode().item(0).fireEvent("click",tree.getRootNode().item(0));
          }
            }
        },
  listeners:{
   'click':function(n){
         var url = 'managedict1.jsp';
          var tabPanel = tabs.getItem(n.text);//根据id获得指定的tab
          if(tabPanel!=null){//如果根据指定的id获得tab不是空值，就将这一个tab设置为活动的tab
           tabs.setActiveTab(n.text);
           tabPanel.load();
          }else{
           tabs.add( {//如果是空值，就重新建一个tab，其中tab指向活动的html。
                  id:n.text,
                  title : n.text,
                  iconCls : 'tabs',
                  html : '<iframe id="topo" src=\'#\'" width="100%" height="100%"   frameborder="0" scrolling="no"></iframe>',
                  closable : true
                 }).show();
          }
         }
        }
});

本文出自 “IT小宝” 博客，请务必保留此出处http://1193452522.blog.51cto.com/3663772/998633