ExtJs学习笔记(8)_TabPanel的用法

ExtJs学习笔记(8)_TabPanel的用法

啥也不说了，直接上代码：

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--> <! DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html;charset=utf-8" />
< link rel ="stylesheet" type ="text/css" href ="../resources/css/ext-all.css" />
< script type ="text/javascript" src ="../adapter/ext/ext-base.js" ></ script >
< script type ="text/javascript" src ="../ext-all.js" ></ script >
< style type ="text/css" >
* { font-size : 12px ; line-height : 130% ; }
.list { list-style : square ; width : 500px ; padding-left : 16px ; }
.listli { padding : 2px ; font-size : 8pt ; }

pre {
font-size : 11px ;
}

.x-tab-panel-body.x-panel-body {
padding : 10px ;
}

/* defaultloadingindicatorforajaxcalls */
.loading-indicator {
font-size : 8pt ;
background-image : url('../resources/images/default/grid/loading.gif') ;
background-repeat : no-repeat ;
background-position : left ;
padding-left : 20px ;
}

.new-tab {
background-image : url(../examples/feed-viewer/images/new_tab.gif)!important ;
}

.tabs {
background-image : url(../examples/desktop/images/tabs.gif)!important ;
}
</ style >
< title > TabsDemo </ title >
</ head >
< body >
< script type ="text/javascript" >
Ext.onReady( function (){

var tabs = new Ext.TabPanel({
renderTo:Ext.getBody(),
resizeTabs: true , // turnontabresizing
minTabWidth: 115 ,
tabWidth: 135 ,
enableTabScroll: true ,
width: 600 ,
height: 150 ,
defaults:{autoScroll: true },
plugins: new Ext.ux.TabCloseMenu(),
tbar:[{text: ' 新建Tab ' ,iconCls: ' new-tab ' ,handler:addTab}]

});

// tabgenerationcode
var index = 0 ;
while (index < 2 ){
addTab();
}

function addTab(tab){
if (tabs.items.length > 9 ){
Ext.MessageBox.alert( " 提示 " , " 最多只能新建10个tab! " );
// tabs.tbar.setVisible(false);
return false ;
}
tabs.add({
title: ' NewTab ' + ( ++ index),
iconCls: ' tabs ' ,
html: ' TabBody ' + (index),
closable: true
}).show();
}

});



// 右键弹出菜单
Ext.ux.TabCloseMenu = function (){
var tabs,menu,ctxItem;
this .init = function (tp){
tabs = tp;
tabs.on( ' contextmenu ' ,onContextMenu);
}

function onContextMenu(ts,item,e){
if ( ! menu){ // createcontextmenuonfirstrightclick
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);
}
});
}
}]);
}
ctxItem = item;
var items = menu.items;

items.get(tabs.id + ' -close ' ).setDisabled( ! item.closable);

// //只剩一个时，禁止关闭
// if(tabs.items.length==1){
// items.get(tabs.id+'-close').setDisabled(true);
// }

var disableOthers = true ;
tabs.items.each( function (){
if ( this != item && this .closable){
disableOthers = false ;
return false ;
}
});
items.get(tabs.id + ' -close-others ' ).setDisabled(disableOthers);
menu.showAt(e.getPoint());
}
};
</ script >
</ body >
</ html >

效果图如下:

欢迎加入:http://www.itpob.cn/bbs