JavaScript ext js BorderLayout

Posted 2021-05-19

<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');
}