Form factors

This application will adapt to a variety of devices, from desktop browsers to tablets and mobile phones. The size of these devices is often called the "form factor" and Ext JS provides several mechanisms that allow you to customize the user experience depending on the form factor of the device being used.

In this chapter, we'll focus on responsiveConfig, an option available when you include the Ext.mixin.Responsive class in your views. In a standard desktop application, we might have two components side by side in the viewport, since desktop screen sizes are generally wider than they are tall. On a mobile phone, users will often be in portrait orientation, so this is no longer true; the screen is taller than it is wide. In this case, we can use responsiveConfig to override the original side-by-side configuration and use different layouts, items, and component widths—in fact any aspect of the original viewport configuration—and change the appearance and behavior of the application...