Simple viewPort Extjs


<!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>

viewport

Leave a comment