Create a viewport using Extjs (Extended Javascript)

Viewport is nothing but a plain container that automatically changes its size to the size of the whole browser window. It then allows you to add ExtJS UI components and containers within its region.

Here is a quick and easy to build example for constructing a viewport using extjs library.

This example shows that i have created 2 sections using viewport.
One in the west region and one in the center.
We can assign width and size to these regions.

After doing this the final step is to render our html components or regions inside these views.
You can use the contentEl property to eventually achieve this.


Code:-

// Viewport variable start
        var myBorderPanel = new Ext.Viewport({
            id : 'l1',
            width: 700,
            height: 1000,
            layout: 'border',
            
            items: [{
                collapsible: true,
                collapseMode: 'mini',
                split: true, 
                region:'west',
                margins: '5 0 0 0',
                cmargins: '5 5 0 0',
                width: 250,
                minSize: 100,
                maxSize: 250,
                contentEl: 'BLayout2',
                border:0,
                bodyStyle:{"background-color":"#E6E4E4","border":"none"} 
            },{
                region:'center',
                margins: '5 0 0 0',
                contentEl: 'BLayout3',
                bodyStyle:{"border":"none"}                
            }]
        });

        // Viewport variable end
You should now be good to go and create your very own viewport using extjs library.