Two columns iPad layout template for SenchaTouch (Javascript : ipad-template.js)

gistfile1.js

Ext.setup({
    icon: 'icon.png',
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    glossOnIcon: false,
    onReady: function() {
	    //---------------------------------
		//	Title Bar
	    //---------------------------------
		var header = new Ext.Toolbar({
			dock: 'top',
			title:'This is the title'
		});
	
	    //---------------------------------
		//	Footer
	    //---------------------------------
		var footer = new Ext.Toolbar({
			dock: 'bottom',
			title:'This is the Footer'
		});
	
	    //---------------------------------
		//	Left Side
	    //---------------------------------
		var groupLeftSide = {
			margin:'10px',
			html:[
				'Hello World<BR>',
				"I'm the right side",
				'<HR>',		
				'this is a line<BR>',
				'this is a line<BR>',
				'this is a line<BR>',
				'this is a line<BR>',
				'this is a line<BR>',		
			].join("")
		}

		var leftSidePanel = new Ext.Panel({
			style:"border-right:solid black 1px;",
			scroll:'vertical',
			dock: 'left',
			width:200,
			items:[groupLeftSide]
		});
		
	    //---------------------------------
		//	Right Side
	    //---------------------------------
		var groupContentSide = {
			margin:'10px',
			html:[
				'Hello World<BR>',
				"I'm the content side",
				'<HR>',
				'this is a line<BR>',
				'this is a line<BR>',
				'this is a line<BR>',
				'this is a line<BR>',
				'this is a line<BR>'
			].join("")
		}

		var contentSidePanel = new Ext.Panel({
			//fullscreen: true,
			scroll:'vertical',
			height:'100%',

			items:[groupContentSide]
		});

	    //---------------------------------
		//	Main Screen
	    //---------------------------------
	    var mainScreen = new Ext.Panel({
			fullscreen: true,
			dockedItems: [header,footer,leftSidePanel],
			items:[contentSidePanel]
	    });
	
		//mainScreen.initComponent();


    }/*onReady*/
});