Mega Code Archive

 
Categories / JavaScript DHTML / Ext JS
 

Set Panel layout to Ext Panel

<!-- /*!  * 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 item1 = new Ext.Panel({                 title: 'Accordion Item 1',                 html: '&lt;empty panel&gt;',                 cls:'empty'             });             var item2 = new Ext.Panel({                 title: 'Accordion Item 2',                 html: '&lt;empty panel&gt;',                 cls:'empty'             });             var item3 = new Ext.Panel({                 title: 'Accordion Item 3',                 html: '&lt;empty panel&gt;',                 cls:'empty'             });             var item4 = new Ext.Panel({                 title: 'Accordion Item 4',                 html: '&lt;empty panel&gt;',                 cls:'empty'             });             var item5 = new Ext.Panel({                 title: 'Accordion Item 5',                 html: '&lt;empty panel&gt;',                 cls:'empty'             });             var accordion = new Ext.Panel({                 region:'west',                 margins:'5 0 5 5',                 split:true,                 width: 210,                 layout:'accordion',                 items: [item1, item2, item3, item4, item5]             });             var viewport = new Ext.Viewport({                 layout:'border',                 items:[                     accordion, {                     region:'center',                     margins:'5 5 5 0',                     cls:'empty',                     bodyStyle:'background:#f1f1f1',                     html:'<br/><br/>&lt;empty center panel&gt;'                 }]             });         }); </script> </body> </html>