BorderLayout example in ExtJS 3.2, Client Side - rextester

Run Code | API | Code Wall | Misc | Feedback | Login | Theme | Privacy | Patreon

BorderLayout example in ExtJS 3.2

Language: Layout:

<!DOCTYPE html>
<html>

<head>
    <title>Hello, world!</title>
    <meta charset="utf-8" />
    <link href="//svn.geoext.org/ext/3.2.0/resources/css/ext-all.css" rel="stylesheet" type="text/css">

<script src="//svn.geoext.org/ext/3.2.0/adapter/ext/ext-base.js"></script>
    <script src="//svn.geoext.org/ext/3.2.0/ext-all.js"></script>
    <script type="text/javascript">
        Ext.onReady(function() {
            var viewPort = new Ext.Viewport({
                layout: 'border',
                items: [{
                    region: 'north',
                    html: '<h1 class="x-panel-header">Page Title</h1>',
                    autoHeight: true,
                    border: false,
                    margins: '0 0 5 0'
                }, {
                    region: 'west',
                    collapsible: true,
                    title: 'Navigation',
                    width: 200
                    // the west region might typically utilize a TreePanel or a Panel with Accordion layout
                }, {
                    region: 'south',
                    title: 'Title for Panel',
                    collapsible: true,
                    html: 'Information goes here',
                    split: true,
                    height: 100,
                    minHeight: 100
                }, {
                    region: 'east',
                    title: 'Title for the Grid Panel',
                    collapsible: true,
                    split: true,
                    width: 300,
                    xtype: 'grid',
                    store: new Ext.data.ArrayStore({
                        fields: [{
                            name: 'company'
                        }, {
                            name: 'price',
                            type: 'float'
                        }, {
                            name: 'change',
                            type: 'float'
                        }],
                        data: [
                            ['3m Co', 71.72, 0.02],
                            ['Alcoa Inc', 29.01, 0.42],
                            ['Altria Group Inc', 83.81]
                        ]
                    }),
                    columns: [{
                        id: 'company',
                        header: 'Company',
                        sortable: true,
                        dataIndex: 'company'
                    }, {
                        header: 'Price',
                        sortable: true,
                        dataIndex: 'price'
                    }, {
                        header: 'Change',
                        sortable: true,
                        dataIndex: 'change'
                    }]
                }, {
                    region: 'center',
                    xtype: 'tabpanel', // TabPanel itself has no title
                    activeTab: 0,
                    items: [{
                        title: 'Default Tab',
                        html: 'The first tab\'s content. Others may be added dynamically'
                    }, {
                        title: 'Tab 2',
                        html: 'The 2nd tab\'s content. Others may be added dynamically'
                    }]
                }]
            });
            viewPort.render('viewport');
        });
    </script>
</head>

<body>
    <div id="viewport"></div>
</body>

</html>

edit mode | history

λ

                                      .NET NoSQL database for rapid development