Posted By

arunpjohny on 11/29/07

Tagged

Versions (?)

Last Edited at 11/29/07 07:11am

Statistics

Viewed 435 times

Favorited by 0 user(s)

Related snippets

ext js BorderLayout

/ Published in: JavaScript

version ext-2.0-rc1.
Dependencies
ext-all-debug.js
ext-yui-adapter.js
ext-all.css

Highlighted TextExpand

<div id="pageContainer" class="pageContainer"></div>
<div id="west">
	<p>Hi. I'm the west panel.</p>
</div>
<div id="north">
	<p>Hi. I'm the north panel.</p>
</div>
<div id="center">
	<p>Hi. I'm the center panel.</p>
</div>

Ext.onReady(
	borderLayout
);

function borderLayout(){
	var center = new Ext.Panel({
        items: [{
            contentEl: 'center',
            autoScroll: true,
            border: false
        }]
	});

var border = new Ext.Panel({
	    title: 'Border Layout',
	    height: 500,
	    layout: 'border',
	    items: [{
	        title: 'North Panel',
	        region: 'north',
	        height: 100,
	        minSize: 75,
	        maxSize: 250,
	        margins: '5 5 5 5',
	        border: false,
	        items: [{
	            contentEl: 'north',
	            autoScroll: true,
	            border: false
	        }]
	    },{
	        title: 'South Panel',
	        region: 'south',
	        height: 100,
	        minSize: 75,
	        maxSize: 250,
	        margins: '5 5 5 5'
	    },{
	        title: 'East Panel',
	        region: 'east',
	        margins: '0 5 0 0',
	        width: 200,
	        minSize: 100,
	        maxSize: 300
	    },{
	        title: 'West Panel',
	        region:'west',
	        margins: '0 0 0 5',
	        width: 200,
	        minSize: 100,
	        maxSize: 300,
	        items: [{
	            contentEl: 'west',
	            autoScroll: true,
	            border: false
	        }]
	    },{
	        title: 'Main Content',
	        region: 'center',
	        margins: '0 0 0 0',
	        items: [center]
	    }]
	});
	
	border.render('pageContainer');
}

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.