O'Reilly logo

Ext JS 4 First Look by Loiane Groner

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

Component layouts

The Component Layout is responsible for organizing the HTML elements for a Component. In Ext JS 4, there are some new features applied to Toolbars, Headers, and Form Fields. Let's take a look at them.

Dock layout

To improve flexibility, Ext JS 4 now has a new layout engine called DockLayout, mostly applied to panel Components. This layout is set internally and it is used for panel Headers and Toolbars.

We will compare the differences between Ext JS 3 Panel and Ext JS 4 Panel. First, we will take a look at the following code implemented using Ext JS 3:

var html = '<div style="padding:10px;"><h1><center><span>Body</center></h1></div>'; var panel1 = new Ext.Panel({ collapsible:true, width:400, renderTo: 'ext3-panel', title: 'Ext 3 ...

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