Ext.onReady(function(){
var v = new Ext.Panel({items: [{el: 'north',height: 32,xtype: 'box',region: 'north'},{contentEl: 'south',collapsible: true,title: 'South',height: 100,xtype: 'panel',region: 'south',split: true,minSize: 100,maxSize: 200,margins: '0 0 0 0'},{items: {items: [{html: '<p>A TabPanel component can be a region.</p>',title: 'A Tab',autoScroll: true,xtype: 'panel'},new Ext.grid.PropertyGrid({title: 'Property Grid',source: {"(name)":"Properties Grid","grouping":false,"autoFitColumns":true,"productionQuality":false,"created":"new Date(Date.parse('10\/15\/2006'))","tested":false,"version":0.01,"borderWidth":1},closable: true})],activeTab: 1,tabPosition: 'bottom',border: false,xtype: 'tabpanel'},title: 'East Size',collapsible: true,width: 225,xtype: 'panel',region: 'east',split: true,minSize: 175,maxSize: 400,margins: '0 5 0 0',layout: 'fit'},{items: [{contentEl: 'west',title: 'Navigation',border: false,iconCls: 'nav',xtype: 'panel'},{html: '<p>Some settings in here.</p>',title: 'Settings',border: false,iconCls: 'settings',xtype: 'panel'}],title: 'West',collapsible: true,width: 200,id: 'west-panel',xtype: 'panel',region: 'west',split: true,minSize: 175,maxSize: 400,margins: '0 0 0 5',layout: 'accordion',layoutConfig:{animate: true}},{items: [{contentEl: 'center1',title: 'Close Me',autoScroll: true,xtype: 'panel',closable: true},{contentEl: 'center2',title: 'Center Panel',autoScroll: true,xtype: 'panel'}],activeTab: 0,xtype: 'tabpanel',region: 'center',layoutConfig:{deferredRender: true}}],height: 600,layout: 'border'});
v.render('viewport');
});