extjs5学习笔记之viewport+tabpanel布局

整体布局是viewport  点击左边导航按钮天机一个tab  如tab存在 则聚焦该tab否则添加新的tab     

下面直接上代码

var view = null;
		Ext.onReady(function() {
			var accordion = Ext.create("Ext.panel.Panel",{
				title : "左侧导航",layout : "accordion",//设置为手风琴布局
				layoutConfig : {
					animate : true
				},width : 250,minWidth : 90,region : "west",//设置方位
				split : true,collapsible : true,items : [ {
					title : "客户管理",items:[{
						text:'客户列表',xtype : 'button',width:240,height:30,margin : 5,maxWidth : 245,handler : function(){
							addTable("客户列表",myjs.createGridPanel(ctx+"/json/datagrid_data1.json",view.getComponent("tabs").getHeight()));
						}
					},{
						text:'下拉框',handler : function(){
							addTable("下拉框",myjs.createComBox());
						}
					},{
						text:'Panel',handler : function(){
							addTable("Panel",myjs.createPanel());
						}
					},{
						text:'FormPanel',handler : function(){
							addTable("FormPanel",myjs.createFormPanel());
							myjs.openQuickTips();
						}
					},{
						text:'TreePanel',handler : function(){
							addTable("TreePanel",myjs.createTreePanel());
						}
					}
					]
				},{
					title : "嵌套面板二",html : "嵌套面板二",iconCls : "search"
				},{
					title : "嵌套面板三",html : "嵌套面板三",iconCls : "back"
				},{
					title : "嵌套面板四",html : "嵌套面板四",iconCls : "12"
				} ]

			});

			view = new Ext.Viewport({
				title : "Viewport",layout : "border",//这里是（border）边界布局
				defaults : {
					bodyStyle : "background-color: #FFFFFF;",frame : true
				},items : [ accordion,//这里是（accordion）手风琴布局
				{
					region : "north",height : 100,html:'<center><b><h1>欢迎进入XX管理系统！</h1></b></center>'
				},{ //tabs选项卡渲染到center

					region : "center",id : "tabs",xtype : 'tabpanel',split : true,border : true,frame : true,},{
					region : "south",html:'<center><h3>技术支持：<a href="http://www,baidu.com">XX有限公司</a></h3></center>'
				} ]
			});

			function addTable(title,items) {
				var tabPanel = view.getComponent("tabs");
				var newTab = tabPanel.getChildByElement(title);
				if (newTab == null) {
					 newTab = tabPanel.add({
						title : title,id : title,region : "center",closable : true,height:300,height:800,items: items
					}); 
				}
			
				tabPanel.setActiveTab(newTab);
				tabPanel.doLayout();
			}


			height = view.getComponent("tabs").getHeight();
		});