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');
??? 还有一个问题，对于加载多项的列表菜单还在研究中，就这么多，欢迎提问，谢谢，下了。
效果如下图；
