1. Excessive or unnecessary nesting of component structures One of the most common mistakes developers make is nesting components for no reason. Doing this hurts performance and can also cause unappealing aesthetics in the app with oddities such as double borders or unexpected layout behavior. In example 1A below, we have a panel that contains a single grid. In this case, the panel is unnecessary. As shown in example 1B, the extra panel can be eliminated. Remember that forms, trees, tab panels and grids all extend from Panel, so you should especially watch for unnecessary nesting conditions whenever using these components. items : [ { xtype : 'panel' , title : ‘My Cool Grid’ , layout : ‘fit’ , items : [ { xtype : 'grid' , store : 'MyStore' , columns : [ { ... } ] } ] } ] Example 1A. BAD: The ‘panel’ is unnecessary. layout : ‘fit’ , items : [ { xtype : 'grid' , title
A foundation you can build.