Responsive layout

Ext JS provides several tools for building a responsive layout. A video was recently published on Sencha‘s official YouTube channel, titled Building Responsive, Data-Driven Enterprise Applications with JavaScript, where Wemerson Januario explains the various options offered by ExtJS.

Introduction

Having used bootstrap in the past, I’ve always found the 12-column system convenient. Essentially, the page is divided into twelve columns, and components are placed into them one after another. Once the twelfth column is exceeded, the component wraps onto a new row. You can also specify how many columns each component should span, which makes it possible to build complex layouts with very little effort.

What makes this approach even more interesting is that the number of columns a component spans can depend on the browser window size, and therefore on the device resolution. For example, a text field might span three columns on a wide device, allowing four fields to sit side by side on a single row, and span all 12 columns on small devices, so just one field per row.

This is implemented by defining a series of breakpoints based on screen size:

• Extra large (xl): more than 1200 pixels
• Large (lg): more than 992 pixels
• Medium (md): more than 768 pixels
• Small (sm): more than 576 pixels
• Extra small (xs): less than 576 pixels

Implementation in ExtJS

ExtJS doesn’t provide anything like this out of the box, but building something similar isn’t complicated at all. In my (N)Ext package you can find an example in GridLayout. Using this package you can write code like the following:

    {
        xtype: 'container',
        layout: {
            type: 'next-grid'
        },
        defaults: {
            xtype: 'textfield',
            labelAlign: 'top'
        },
        items: [
            {
                label: 'First name',
                placeholder: 'e.g. Mario',
                colspan: { lg: 6, md: 12, sm: 12 }
            }, {
                label: 'Last name',
                placeholder: 'e.g. Rossi',
                colspan: { lg: 3, md: 6, sm: 12 }
            }, {
                label: 'City',
                placeholder: 'e.g. Milano',
                colspan: { lg: 3, md: 6, sm: 12 }
            }
        ]
    }

As you can see, the new next-grid layout adds a colspan config to the container’s items. This property can be either a plain number or an object. If it’s a plain number, the components will use a fixed number of columns; otherwise, the number of columns will depend on the screen resolution.

Conclusion

The 12-column system is a simple but powerful pattern for building responsive layouts without writing ad-hoc CSS for every breakpoint. ExtJS doesn’t offer it out of the box, but as shown above, a custom layout is all it takes to implement it. The result is a declarative, reusable way to define how components are arranged as the screen size changes, in line with what anyone familiar with frameworks like Bootstrap would already expect.