Responsive Design in ExtJS 4

I think this has been a hot topic lately: making web sites that adjust based on resolution of the device the user is using to browse. Now I’m not going to make this post about Sencha Touch. Even though in my “perfect responsive strategy” I would be using both ExtJS and Sencha Touch (and I can write more about that if you care to comment about your interest), this post is going to be only about ExtJS.

In this example we’ll be achieving the very common “navigation collapses to menu” effect, demonstrated here in my Android 4.x LG Intuition, by rotating the device from horizontal to vertical:

Try this example by running the following URL in a new window of your browser: https://fiddle.sencha.com/fiddle/2j5/preview

If you resize the window to be small enough width, you’ll see the “responsive” behavior. I tested this in Chrome, FF, and IE. The effect is also triggered by zooming in and out – not on IE though. However, through some additional coding that can be achieved as well.

Here it is running live and respecting the iFrame boundaries:

This is not achieved via CSS media queries, as most commonly used in “responsive design”. There are plenty of tutorials on how to do that and you can certainly use that approach with ExtJS.

The approach I present here is more programmatic and far more flexible in nature and simplicity. The entire logic is contained in this function:

responsiveFunction = function(viewportWidth) {
    var minimizeMenu = viewportWidth < minViewportWidth,
        naviPanel = Ext.ComponentQuery.query('#naviPanel')[0],
        naviMinimizedButton = Ext.ComponentQuery.query('#naviMinimizedButton')[0];
 
    if (minimizeMenu) {
        naviPanel.hide();
        naviMinimizedButton.show();
    }
    else {
        naviMinimizedButton.hide();
        naviPanel.show();
    }
};

Essentially we hide the side navigation whenever the screen is too small, and show a button with a menu instead. If screen gets too large, the reverse happens.

In order for this to work on an Andoird device, you would need to set a proper meta tag, which unfortunately I cannot do in Sencha Fiddle, but here’s the tag:

<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,height=device-height,target-densitydpi=device-dpi,user-scalable=yes" />

You can read about mobile browser scaling meta tags for other devices here: http://stackoverflow.com/questions/11345896/full-webpage-and-disabled-zoom-viewport-meta-tag-for-all-mobile-browsers

Here’s the full source code; short and sweet: