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:'下拉框',
						xtype : 'button',
						width:240,
						height:30,
						margin : 5,
						maxWidth : 245,
						handler : function(){
							addTable("下拉框",myjs.createCombox());
						}
					},{
						text:'Panel',
						xtype : 'button',
						width:240,
						height:30,
						margin : 5,
						maxWidth : 245,
						handler : function(){
							addTable("Panel",myjs.createPanel());
						}
					},{
						text:'FormPanel',
						xtype : 'button',
						width:240,
						height:30,
						margin : 5,
						maxWidth : 245,
						handler : function(){
							addTable("FormPanel",myjs.createFormPanel());
							myjs.openQuickTips();
						}
					},{
						text:'TreePanel',
						xtype : 'button',
						width:240,
						height:30,
						margin : 5,
						maxWidth : 245,
						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,
					collapsible : true,
					html:'<center><b><h1>欢迎进入XX管理系统！</h1></b></center>'
				}, { //tabs选项卡渲染到center

					region : "center",
					id : "tabs",
					xtype : 'tabpanel',
					split : true,
					border : true,
					collapsible : true,
					frame : true,

				}, {
					region : "south",
					split : true,
					border : true,
					collapsible : true,
					height : 100,
					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();
		});