Comments about using layouts

Consider that you can nest layouts using combinations of containers and layouts, and also remember to ensure the right configuration each layout needs. In upcoming chapters, we will use layout nesting and containers-layout combinations so that you can have a more precise idea of how to combine these. Meanwhile, you can try to nest, combine, and play with the layout system.

One of the common mistakes that Ext JS beginners make is with the overnesting components; this can sometimes harm performance. You need to use layouts and set the proper type of container with adequate planning, for example:

Ext.onReady(function(){
  Ext.create('Ext.panel.Panel', {
    width: 500,  height: 300,
    title:  'Border Layout',
    layout: 'border',
    items: [
 {// Incorrect Nesting
 xtype: 'panel',
 title: 'West Region',
 region:'west',
 width: 200,
 collapsible: true,
 layout: 'fit'
 items:[{
 xtype: 'form',
 url: 'myForm.php'
 items[
 // Fields here
 ]
 }]
 },{
      title: 'Center Region',
      region: 'center',
      layout: 'fit',
      margin: '5 5 0 0',
      html:'<b>Main content</b> goes here'
    }],
    renderTo: Ext.getBody()
  });
});

As you can see, in the West region we are setting a panel that contains a form (Ext.form.Panel). In this case, we are overnesting, because if you see the documentation, Ext.form.Panel is extending a Panel component and this will cause our browser to make more DOM. This can also reduce memory because we are creating two components instead of one; the right way should be:

{
  xtype: 'form',
  title: 'West Region',
  region:'west',
   width: 200,
  collapsible: true,
 url: 'myForm.php'
 items[
 // Fields here
 ]
}

This way, the form panel acts the same way as any panel. We reduce one component with many properties, methods, and events that are not necessary and will only consume resources.