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.

Multi Slider example in Extjs

Here is a very simple example to implement multi slider using Extjs framework.
We can use multi slider when we want the user to select a range for a particular value.

This example also uses the plugin to show the value as a tooltip.
Here is the code:-

// Multi Slider

var size= new Ext.Slider({

    renderTo: 'multi-slider-horizontal',

    width: 200,

    values: [5, 250],

    minValue: 1,

    maxValue: 500,

    constrainThumbs: false,

              

    plugins: new Ext.slider.Tip({

        getText: function(thumb){

            return String.format('{0} ', thumb.value);

        }

    })

Hope this helps.

Simple example for Extjs Modal Window

Here is a quick and easy to build Extjs modal window.
This piece of code simply renders a Extjs window with its modal=true property enabled.

Here is the code:-

win = new Ext.Window({

        height      : 400,

        width       : 530,

        modal       : true,

        title       : 'Search Options',

        contentEl   : 'DL',

        plain       : true,

        border      : false,

        resizable   : true,

        draggable   : true,

        closable    : true,

        closeAction : 'hide',

        style       : 'windowstyle1',

        cls         : 'windowstyle1',

        buttonAlign : 'center',      

        buttons     : [

        {

            text    : 'OK',

            handler : function() {

            win.hide();

        }

        }

        ]

    })

    win.show();

Make sure the contentEl contains the id of the container where you want to render the window.

It could be a div id or whatever you find appropriate to render your window in.