ext实现标签式浏览内容

Ext.onReady(function(){
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
   
    var northCpt = new Ext.BoxComponent({
        region: 'north',
        id: 'north-panel',
        el: 'north',
        height: 36,
           margins: '0 0 0 0'
    });

    var southCpt = new Ext.BoxComponent({
        region: 'south',
        id: 'south-panel',
        el: 'south',
        split: true,
        height: 20,
        margins: '0 0 0 0'
    });
   
    var westCpt = new Ext.Panel({
           region: 'west',
        id: 'west-panel',
        el: 'west',
        split: true,
        width: 180,
        minSize: 160,
        maxSize: 260,
        margins: '0 0 0 0',
        title: 'Navigation',
        collapsible: true,
        layout: 'accordion',
        layoutConfig: {animate: true},
        items: [{
               title: 'Favorite',
               border: false,
            iconCls: 'navigation'
        }, {
            title: 'Navigation',
            border: false,
            html: '<div id="tree-div" style="overflow: auto; width: 100%; height: 100%"></div>',
            iconCls: 'navigation'
        }, {
            title: 'Message Center',
            border: false,
            iconCls: 'navigation'
        }, {
           title: 'System Configuration',
           border: false,
           iconCls: 'navigation'
        }]
    });
   
    var tabs = new Ext.TabPanel({
        region: 'center',
        id: 'center-panel',
        el: 'center',
        bbar: new Ext.Toolbar(),
        deferredRender: false,
        resizeTabs: true,
        minTabWidth: 40,
        tabWidth: 90,
        defaults: {autoScroll: true},
        enableTabScroll: true,
        margins: '0 0 0 0'
    });   
    tabs.getBottomToolbar().setHeight(24);
   
    var tab = tabs.add({
        id: 'home',
        title: 'Home',
        closable: false,
        tabWidth: 20,
        autoScroll: true
    });
    tabs.setActiveTab(tab);
    tabs.on('tabchange', function(tabs, tab){updateTab(findNodeByTab(tab), tab);});

    var viewport = new Ext.Viewport({
        el: 'Ajax Viewport',
           layout: 'border',
           items: [northCpt, southCpt, westCpt, tabs]
    });

    var Tree = Ext.tree;
    // set the root node
    var root = new Tree.AsyncTreeNode({
        id: 'root',
        text: 'Ajax Tree',
        draggable: false
    });

    var tree = new Tree.TreePanel({
        id: 'tree',
        renderTo: 'tree-div',
        root: root,
        autoScroll: true,
        animate: true,
        enableDD: false,
        border: false,
        rootVisible: false,
        containerScroll: true,
        loader: new Tree.TreeLoader({
            dataUrl: '../../erp/common/navigation.jsp'
        })
    });
    tree.on('click', treeClick);

    //end loding
    setTimeout(
        function() {
            Ext.get('loading').remove();
            Ext.get('loading-mask').fadeOut({remove: true});
        }, 250
    );
   
    function treeClick(node, e) {
        e.stopEvent();
        //判断是否已经打开该面板
        if (node.isLeaf()) {           
            var tab = tabs.getItem(node.id + '-tab');
            if ('undefined' == typeof tab) addTab(node);
            else updateTab(node, tab);
        }
        else {
            if (!node.isExpanded()) node.expand();
            else node.collapse();
        }
    }
   
    function findNodeByTab(tab) {
        if ('home' == tab.id)
            return null;
        var id = tab.id;
        id = id.replace('-tab', '');       
        return tree.getNodeById(id);
    }

    // 在中间的面板加入tab
    function addTab(node) {   
        var tab = new Ext.Panel({
            id: node.id + '-tab',
            title: node.text,
            closable: true,
            layout: 'fit',
            tbar: new Ext.Toolbar(),
            //html: '<iframe id="' + node.id + 'Frame" src="' + node.attributes.href + '" width="100%" height="100%" frameborder="0"></iframe>',
            //html: '<div><ui:include src="' + node.attributes.href + '"></ui></div>',
            autoLoad: {url: node.attributes.url, nocache: true, scope: this, scripts: true},
            autoScroll: true});
        activeNode = node;
        tabs.add(tab);
        tabs.setActiveTab(tab);
    }

    // 更新tab内容
    function updateTab(node, tab) {
        activeNode = node;
        tabs.setActiveTab(tab);
    }
});