Creating fullscreen Ext JS 4 app with the BorderLayout

Creating fullscreen Ext JS 4 app with the BorderLayout

Hello, if you’re using Ext JS 4 you deal with desktop UI types in the most of your work time, so the border layout is for you.

For Ext JS 4 beginners building views can be complicated, for example if they don’t have access to Sencha Architect tool. The Border Layout supporting a number of nested panels, have collapse ability for example by clicking on the regions header or collapse icon. Another nice feature is the ability to resizing regions.

In this example I will show you how you can use all regions (north, south, east, west and center). The west and east panels will be collapsible. The resizing ability I will show you on the south and west panels.

//Remmeber, the center region is the minimum in BorderLayout implementation

The beginning content of viewport:

Ext.define('DevJS.view.Viewport', {
extend: 'Ext.container.Viewport',

layout: 'border',
items: [{
    title: 'Center',
    region: 'center'
}]
});

The result you can see here:

10-extjs4

Ok, it’s too simple, next elements. Please add north, south, west and east region to items collection. Set height, width and flex. The flex is responsible for fit region to parent container.

//flex using percentages, for example .5 means 50% space

Please add all regions:

Ext.define('DevJS.view.Viewport', {
    extend: 'Ext.container.Viewport',

    layout: 'border',

    items: [
        {
            region: 'north',
            height: 50,
            xtype: 'container'
        },
        {
            title: 'West / Zachodni',
            region: 'west',
            flex: .2
        },
        {
            title: 'Center / Srodkowy',
            region: 'center'
        },
        {
            title: 'East / Wschodni',
            region: 'east',
            width: 200
        },
        {
            title: 'South / Południowy',
            region: 'south',
            flex: .1
        }
    ]
});

The result should look like the following picture:

13-extjs4

The north and south can have height or flex to set region height, you have to set at least one. The west and east regions can have width or flex to calculate the region width.

The final implementation look like the following code:

Ext.define('DevJS.view.Viewport', {
    extend: 'Ext.container.Viewport',

    layout: 'border',

    items: [
        {
            region: 'north',
            margins: 5,
            height: 50,
            xtype: 'container'
        },
        {
            title: 'West / Zachodni',
            region: 'west',
            margins: '0 5 0 5',
            flex: .2,
            collapsible: true,
            split: true,
            titleCollapse: true
        },
        {
            title: 'Center / Srodkowy',
            region: 'center'
        },
        {
            title: 'East / Wschodni',
            region: 'east',
            margins: '0 5 0 5',
            width: 200,
            collapsible: true,
            collapsed: true
        },
        {
            title: 'South / Południowy',
            region: 'south',
            margins: '0 5 5 5',
            flex: .1,
            split: true
        }
    ]
});

In the browser you should have similar result like the following picture:

14-extjs4

The Viewport render all components in the document body and expands to fill the browser window. The center region always take available space to fit in the viewport, so if you try to collapse left or right panel, the center region automatically expands to fill new space.

Features:

a) collapsed - true means the panel is collapsed in the initial stage

//of course feature is available when you use Ext.panel.Panel

b) collapsible - true allow user to collapse panel by clicking on collapse icon in header

c) titleCollapse - true allow user to collapse panel by clicking anywhere on header

c) split - true allow user to change size of region by clicking and draging separator between regions

If you want you can remove right panel now but in some applications is used as filter panel with autohide ability.

Bonus Post!

Okay, now we will add something useful to our layout, almost like in real life application. In the center region please add grid panel. In my case it’s a list of users which I created in this post:

Fundamental MVC in Ext JS 4 (PL version only)

The changes look like the following code:

        {
            title: 'Center / Srodkowy',
            region: 'center',
            items: [
                {
                    xtype: 'users-list'
                }
            ]
        },

But you can simply use standard grid panel, Ext.grid.Panel, this object has two aliases gridpanel or grid.

The result:

15-extjs4

Ok, we have something but it’s not ready yet. Why? We should adjust the grid panel to avaiable space in the center region. To do this we have to set a few details in the configuration:

a) first step, remove title (we need only one)

You can do this using one of two ways:

       {
            title: 'Center / Srodkowy',
            region: 'center',
            items: [
                {
                    header: false,
                    xtype: 'users-list'
                }
            ]
        }

or

        {
            title: 'Center / Srodkowy',
            region: 'center',
            items: [
                {
                    title: '',
                    xtype: 'users-list'
                }
            ]
        }

b) next step, expand grid panel in the center region to have pagination toolbar on the bottom of region, it’s annoying when toolbar jumping with grid rows

       {
            title: 'Center / Srodkowy',
            region: 'center',
            layout:'fit',
            items: [
                {
                    title: '',
                    xtype: 'users-list'
                }
            ]
        }

Set layout to fit, Ext fit layout should have only one child, items.length == 1. If you want to use more than one child, of course you can do this, the fit layout should works but this solution is not good, and Ext JS developers not recommend it too.

The final result look like the following picture:

16-extjs4

Please change, enjoy and have fun. If you have questions please feel free to ask. See you soon.

Comments:
dxd
Reply
14/01/2015 at 7:04 AM

sasasa

Łukasz Sudoł
Reply
07/11/2015 at 2:10 PM

@Christian, I have added the code for you. Please follow up the following URL https://github.com/devjseu/borderlayout

Leave a Reply

Please fill all required fields


Drag circle to the rectangle on the right!

Send