Ext 学习之旅 简单学习快乐学习之菜单栏联动到页面中

直接把上一篇中的centerPage选项换成tab

var tab = new Ext.TabPanel({
    id:'centerPage',
    region:'center',
    deferredRender:false,
    activeTab:0,
    title:"中央面板",
    resizeTabs:true, // turn on tab resizing
    minTabWidth: 115,
    tabWidth:135,
    enableTabScroll:true
});

再在加载完页面后写下入学语句即可。

var root2=new Ext.tree.TreeNode({
        id:"root2",
        text:"树的根"
    });
   
    var c1=new Ext.tree.TreeNode({
        id:'c1',
        icon:'resources/images/yourtheme/menu/group-checked.gif',
        text:'信息征集',
        listeners:{   
        'click':function(node, event) {   
            event.stopEvent();   
            var n = tab.getComponent(node.id);   
            if (!n) { //判断是否已经打开该面板   
                 n = tab.add({   
                    'id':node.id,   
                    'title':node.text,   
                     closable:true,  //通过html载入目标页   
                     html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="http://www.codefans.net"></iframe>'  
                 });   
             }   
             tab.setActiveTab(n);   
         }   
        }
    });
   
    //c1.appendChild(c2);
//    c1.appendChild(c22);
    root2.appendChild(c1);
    //root2.appendChild(c3)
   
    var tree2=new Ext.tree.TreePanel({
        renderTo:"tree1",
        root:root2,    //对应 根节点
        animate:true,
        enableDD:false,
        border:false,
        rootVisible:false,
        containerScroll: true
    });
   
    var index = 0;
    while(index < 7){
        addTab();
    }
    function addTab(){
        tab.add({
            title: 'New Tab ' + (++index),
            iconCls: 'tabs',
            html: 'Tab Body ' + (index) + '<br/><br/>'
                    + Ext.example.bogusMarkup,
            closable:true
        }).show();
    }
   
    new Ext.Button({
        text: 'Add Tab',
        handler: addTab,
        iconCls:'new-tab'
    }).render(document.body, 'tree2');
    还有一个问题，对于加载多项的列表菜单还在研究中，就这么多，欢迎提问，谢谢，下了。

效果如下图；