createNewLayout = function(){
	
	var cardTabs = {
		xtype: 'tabpanel',
		id: 'card-tabs-panel',
		plain: true,  //remove the header border
		activeItem: 0,
		//autoWidth: true,
		border : false,
		enableTabScroll: true,
		
		
		defaults: {autoScroll: true,resizeTabs: true,layout:'fit'},
		items:[{
			xtype:"panel",
			layout:"fit",
			border : false,
			id:"tenants",
			iconCls: 'silk-grid',
			bodyStyle: 'padding:5 5 5 5',
			title:"Tenants",
			items: [gridForm]
		}]
	};

	
	
	var viewport = new Ext.Viewport(
	{
		layout:"border",
		items:[{
			region:"center",
			title:"ABC Spa Manager",
			//layout:"fit",
			id: 'content-panel',
			//region: 'center',
			layout: 'card',
			activeItem: 0,
			margins: '2 5 0 0',
			items: [cardTabs]
			
		},{
			region:"south",
			title:"Status",
			height:20,
			split:true
		},{
			region:"north",
			height:42,
			id: 'logoBar',
			tbar: [
				'->',
				{                   // <-- Add the action directly to a toolbar
					text: 'Logout',
					iconCls: 'silk-door-out'
				},'-',
				{                   // <-- Add the action directly to a toolbar
					text: 'Help',
					iconCls: 'silk-help',
					handler:function() {
						win.show();
					}
				}
			]
		},
		  accordion
		]
		}
	);


	
};

Ext.onReady(function() {
	Ext.QuickTips.init();
	createNewLayout();
	//Ext.getCmp('AccordionPanel_2').expand();
});