<!DOCTYPE html> <html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ExtJs4.2/resources/css/ext-all.css" /> <!–- include ext-all.js -–> <script type="text/javascript" src="ExtJs4.2/ext-all-debug.js"></script> <!–- include your javascript code here -–> <!-- <script type="text/javascript" src="array-grid.js"></script> --> </head> <script type="text/javascript"> Ext.QuickTips.init(); Ext.onReady(function() { var viewport = Ext.create('Ext.container.Viewport',{ layout: "border", id: 'movieview', renderTo: Ext.getBody(), items: [{ region: "north", xtype: 'panel', html: 'North' },{ region: 'west', xtype: 'panel', split: true, collapsible: true, collapseMode: 'max', // can also be min both work well, max is alot good looking title: 'Some Info', bodyStyle:'padding:5px;', width: 200, minSize: 200, html: 'West' },{ region: 'center', xtype: 'tabpanel', activeTab: 0, items: [{ title: 'Grid', html: 'Center' }] },{ region: 'east', xtype: 'panel', split: true, width: 200, html: 'East' },{ region: 'south', xtype: 'panel', html: 'South' }] });}); </script> <body>