Use AccordionPanel in a Viewport : ViewPort « Ext JS « JavaScript DHTML






  1. JavaScript DHTML
  2. Ext JS
  3. ViewPort

Use AccordionPanel in a Viewport

  


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








Related examples in the same category

1.Add viewport to body
2.Viewport: north, west, center
3.collapseMode in a Viewport
4.Set Viewport center to a tab panel
5.Set split to true for east part of the Viewport
6.Set xtype to panel for Viewport
7.Ext.Viewport with tree view and table