Our past two applications have been fairly straightforward examples, but ones that are useful to illustrate how to create a strong foundation for a future, more extensive product. In this chapter, we'll build a fully featured webmail client that will provide a tailored experience for users of both desktop browsers and smaller devices such as tablets.
Everyone knows the traditional e-mail interface, but we'll try and at the same time show how Ext JS technologies can be used to make short work of building such an application. Here's the breakdown of what we'll be doing in this chapter:
- Establishing essential requirements for the application
- Coming up with an ideal user interface for each form factor
- Analyzing the issues that may arise on a smaller screen
- Designing the view and controller structure to present and orchestrate it all
- Evaluating the design of our application
Along the way we'll reinforce our knowledge of routing and view models, as well as undertaking constant re-evaluation of our work to ensure the quality of the code.
We'll also take a little more time to finish the design of this application, dipping our toe in the water of Ext JS theming. While we won't be building a full replacement theme, we'll touch on some of the places where the theming system should be used in order to improve the maintainability of your application.
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 for a taller screen.
This one feature provides us with an exceptionally powerful means to deliver an experience that is tailored to a particular form factor. In this chapter, we'll see some practical examples of implementing responsiveConfig.