Table based portal layout : Portal « Ext JS « JavaScript DHTML






  1. JavaScript DHTML
  2. Ext JS
  3. Portal

Table based portal layout

  

<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
-->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>

</head>

<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
        Ext.onReady(function() {
            var panel = new Ext.Panel({
                id:'main-panel',
                baseCls:'x-plain',
                renderTo: Ext.getBody(),
                layout:'table',
                layoutConfig: {columns:3},
                // applied to child components
                defaults: {frame:true, width:200, height: 200},
                items:[{
                    title:'Item 1'
                },{
                    title:'Item 2'
                },{
                    title:'Item 3'
                },{
                    title:'Item 4',
                    width:410,
                    colspan:2
                },{
                    title:'Item 5'
                },{
                    title:'Item 6'
                },{
                    title:'Item 7',
                    width:410,
                    colspan:2
                },{
                    title:'Item 8'
                }]
            });
        });

</script>
        
</script>
</body>
</html>








Related examples in the same category

1.Portal window management