点击树节点，自动加载选项卡对应的页面, 效果图：
JS Code:
一、创建TreeStore
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "Tab 1", panel: 'tab-1', leaf: true },
{ text: "Tab 2", panel: 'tab-2', leaf: true },
{ text: "Tab 3", panel: 'tab-3', leaf: true }
]
}
});
二、创建选项卡Tabs
var tabs = Ext.create('Ext.tab.Panel', {
region: 'center', //for border layout
margins: '5 5 5 5',
defaults: { bodyPadding: 10 },
items: [
{
title: 'Tab 1',
itemId: 'tab-1',
loader: {
url: 'html1.htm',
contentType: 'html',
autoload: true,
loadMask: true,
scripts: true
},
listeners: {
activate: function (tab) {
tab.loader.load();
}
}
},
{
title: 'Tab 2',
itemId: 'tab-2',
loader: {
url: 'html2.htm',
contentType: 'html',
autoload: true,
loadMask: true,
scripts: true
},
listeners: {
activate: function (tab) {
tab.loader.load();
}
}
},
{
title: 'Tab 3',
itemId: 'tab-3',
loader: {
url: 'html3.htm',
contentType: 'html',
autoload: true,
loadMask: true,
scripts: true
},
listeners: {
activate: function (tab) {
tab.loader.load();
}
}
}
]
});
二、创建树
var tree = Ext.create('Ext.tree.Panel', {
region: 'west', //for border layout
collapsible: true,
title: 'Menu',
200,
store: store,
rootVisible: false,
margins: '5 0 5 5',
listeners: {
select: function (s, m) {
tabs.setActiveTab(m.raw.panel);
}
}
});