Extjs学习总结之27选项卡面板tabPanel

这一章主要是讲选项卡面板的，其实选项卡也是一个面板。选项卡面板就是对面板的嵌套。。。看代码吧：

 

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 //一次性将选项卡内容全部加载，不推荐
//	});
});


效果图：