---

• Next »
• « Previous

Ext JS Viewport:

Viewport in Ext JS is a specialized container representing the viewable application area in the browser. There can be only one viewport in ExtJS 4 single page application.

The Viewport renders itself to the document body, and automatically resizes itself to the size of the browser viewport and manages window resizing.

Let's create a viewport in an Ext JS application.

First, create a app.js as shown below.

Ext.application({
    name: 'School',
    mainView: 'School.view.Viewport'
});

In the above app.js, mainView config indicates the initial view to render. Here, it is a view class School.view.Viewport. We will use classic toolkit for our sample app. So, create a classic folder and a view folder inside classic folder.

In the view folder, create Viewport.js and define Schoo.view.Viewport class as shown below.

Ext.define('School.view.Viewport', {

    extend: 'Ext.container.Viewport',
    alias: 'widget.StudentViewport',
     requires: ['Ext.menu.Menu','School.view.ViewportController'],
    controller:'viewport',
    config: {},
    constructor: function(config) {        
        return this.callParent(arguments);
    },

    initComponent: function() {
        Ext.apply(this, {
            id: 'StudentViewportID',
            title: 'Student Information',
            
            layout: {
                type: 'border'
            },
            items: [{
                region: 'north',
                border: false,
                margins: '0 0 5 0',
                items: [{
                    xtype: 'container',
                    html: '<h1 class="x-panel-header">extjs-tutorial.com</h1>'
                }, {
                    xtype: 'toolbar',
                    itemId: 'schoolToolbar',
                    enableOverflow: true,
                    items: [{
                        xtype: 'button',
                        // default for Toolbars
                        text: 'Add Tab',
                        itemId: 'btnAddtabs',
                        listeners: {
                            click: 'onAddTab'
                        }
                    }, {
                        xtype: 'button',
                        // default for Toolbars
                        text: 'Add Window',
                        itemId: 'btnAddwindow',
                        listeners: {
                            click: 'onAddWindow'
                        }
                        
                    }, {
                        xtype: 'splitbutton',
                        text: 'Split Button'
                    },
                    
                    '->',
                    {
                        xtype: 'textfield',
                        name: 'field1',
                        emptyText: 'enter search term'
                    },
                    '-',
                    'text 1',                    
                    {
                        xtype: 'tbspacer'
                    },                    
                    'text 2', {
                        xtype: 'tbspacer',
                        width: 50
                    },                    
                    'text 3']
                }]
            }, {
                region: 'west',                
                collapsible: true,
                title: 'Navigation',
                width: 150,
                split: true,
                items: [{
                    xtype: 'menu',
                    width: 150,
                    plain: true,
                    floating: false,
                    showSeparator: true,

                    items: [{
                        text: 'Menu item 1'

                    }, {
                        xtype: 'menuseparator'
                    }, {
                        text: 'Menu item 2'
                    }, {
                        xtype: 'menuseparator'
                    }, {
                        text: 'Menu item 3'
                    }]
                }]

            }, {
                region: 'south',
                title: 'South Panel',
                collapsible: true,
                html: 'Information goes here',
                split: true,
                height: 100,
                minHeight: 100
            }, {
                region: 'east',
                title: 'East Panel',
                split: true,
                width: 150
            }, {
                region: 'center',
                xtype: 'tabpanel',
                activeTab: 0,
                items: [{
                    title: 'Default Tab',
                    html: 'The first tab\'s content. Others may be added dynamically'
                }, {
                    title: 'Second Tab',
                    html: 'The second tab\'s content. Others may be added dynamically'
                }]
            }]
        });

        this.callParent(arguments);
    }

});

In the above viewport class, it includes different regions in viewport to separate different sections of the application view such as header, left bar, right bar, center area and footer area. Ext.container.Panel is the default xtype in Viewport item collection.

Now, to handle events from the above viewport class, add ViewportController class. For that, create app -> view -> ViewportController.js and define School.view.ViewportController class as shown below.

Ext.define('School.view.ViewportController', {
    extend: 'Ext.app.ViewController',

    alias: 'controller.viewport',

    onAddWindow: function(sender, record) {
        Ext.Msg.alert('Add Window', 'Add a new window here.');
    },

    onAddTab: function(choice) {
        Ext.Msg.alert('Add Tab', 'Add a new tab here.');
    }
});

Try it on https://fiddle.sencha.com/#fiddle/1itp

Visit Sencha documentation for more information on viewport.

---

---

• Next »
• « Previous