ExtJs Tree加載選項卡，選項卡加載頁面不用iframe

　　點擊樹節點，自動加載選項卡對應的頁面, 效果圖：

　　

　　JS Code:

1、建立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 }
			]
                }
            });

　　

2、建立選項卡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();
			        }
			    }
			}
		]
            });

　　

2、建立樹

    var tree = Ext.create('Ext.tree.Panel', {
                region: 'west', //for border layout
                collapsible: true,
                title: 'Menu',
                width: 200,
                store: store,
                rootVisible: false,
                margins: '5 0 5 5',
                listeners: {
                    select: function (s, m) {
                        tabs.setActiveTab(m.raw.panel);
                    }
                }
            });

　　源碼地址:ExtJsDemo1