怎么用ext实现标签式浏览

Question

我就想用ext实现标签式浏览内容，
当我点击左边的树形菜单，右边出来内容，以标签形式表现。不知道怎么弄 望大侠指点

Answer 1

ext官方网站上都有详细的demo，会教你怎么用

Answer 2

Ext.onReady(function(){
   tree.on('click', addTab)
 var tabs = new Ext.TabPanel({... });    function addTab(){
        tabs.add({
            title: 'New Tab ',
            iconCls: 'tabs',
            closable:true
        }};
    }
});

Answer 3

这个我知道 ，要是放在布局 Viewport里面的center的里面
怎么搞

Answer 4

看看是不是要这个玩意儿啊，给你研究一下。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);
}
});