O'Reilly logo

Ext JS 4 Web Application Development Cookbook by Stuart Ashworth, Andrew Duncan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Combining multiple layouts

This chapter has demonstrated how to use individual layouts with Ext JS, however, it's time to bring everything together, combining some of the layouts to create the beginning of a desktop style Ext JS application.

This recipe will start with an Ext.Viewport to form the basis of a single page web application because it is a component that always expands to fill the browser window. We will then look at using a BorderLayout and combining it with:

  • An AccordionLayout in the west region as a main menu
  • A CardLayout in the center region
  • A combination layout with the HBoxLayout and VBoxLayout, also in the center panel
  • An Ext.tab.Panel to navigate between screens:

How to do it...

  1. Start by specifying the panel for the west region. In ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required