这一章主要是讲选项卡面板的,其实选项卡也是一个面板。选项卡面板就是对面板的嵌套。。。看代码吧:
tabpanel.js:
Ext.onReady(function(){ /** * TabPanel是panel的子类,即TabPanel本身就是一个面板,而TabPanel * 的每一个标签又是一个面板。 */ // //定义两个普通面板 // var panel1 = new Ext.Panel({ // title:"选项卡1", // html:"hello", // bodyStyle:"padding:10px" // }); // // var panel2 = new Ext.Panel({ // title:"选项卡2", // html:"world", // bodyStyle:"padding:10px" // }); // // //定义一个选项卡面板 // var tabPanel = new Ext.TabPanel({ // renderTo:"d", // width:500, // heigh:500 // }); // // //将版面添加到选项卡面板上 // tabPanel.add(panel1); // tabPanel.add(panel2); // tabPaenl.setActiveTab(panel1); // var tabs,menu,ctxItem; // this.init = function(tp){ // tabs = tp; // tabs.on('contextmenu',onContextMenu); // } // // function onContextMenu(ts,item,e){ // if(!menu){ // menu = new Ext.menu.Menu([{ // id:tabs.id+'-close', // text:"关闭标签", // handler:function(){ // tabs.remove(ctxItem); // } // },{ // id:tabs.id+'-close-others', // text:"关闭其他标签", // handler:function(){ // tabs.items.each(function(item){ // if(item.closable && item!= ctxItem){ // tabs.remove(item); // } // }); // } // },{ // id:tabs.id+'-close-all', // text:"关闭全部标签", // handler:function(){ // tabs.items.each(function(item){ // if(item.closable){ // tabs.remove(item); // } // }); // } // },"-",{ // id:tabs.id+'-fresh', // text:"刷新", // iconCls:"x-tbar-loading", // handler:function(){ // ctxItem.getUpdater().update(ctxItem.autoLoad.url); // } // },{ // id:tabs.id+'-fresh-all', // text:"刷新全部", // iconCls:"x-tbar-loading", // handler:function(){ // tabs.items.each(function(item){ // ctxItem.getUpdater().update(ctxItem.autoLoad.url); // }); // } // } // ]); // } // // // ctxItem = item; // var items = menu.items; // items.get(tabs.id+'-close').setDisabled(!item.closable); // var disableOthers = true; // tabs.item.each(function(){ // if(this!=item && this.closable){ // disableOthers = false; // return false; // } // }); // // items.get(tabs.id+'-close-others').setDisabled(disableOthers); // var disableAll = true; // tabs.item.each(function(){ // if(this.closeable){ // disableAll = false; // return false; // } // }); // // items.get(tabs.id+'-close-all').setDisabled(disableAll); // menu.showAt(e.getPoint()); // } // // // var tabPanel = new Ext.TabPanel({ renderTo:"d", width:300, height:300, items:[{ title:"选项卡1", html:"hello", bodyStyle:"padding:10px" },{ title:"选项卡2", html:"world", bodyStyle:"padding:10px" }], activeItem:0 }); // // var tabPanel = new Ext.TabPanel({ // renderTo:"center_div", // enableTabScroll:true, // border:false, // frame:true, // autoWidth:true, // layoutOnTabChange:true, // plugins:[new Ext.ux.TabCloseMenu()], // defaults:{autoScroll:true}//如果内容超出范围,则自动出现滚动条 // //deferredRender:false //一次性将选项卡内容全部加载,不推荐 // }); });
效果图: