Click to search on your search term.
Subscribe to Fig Leaf Tutorials


Need help with a project? Contact us at sales@figleaf.com.
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:
Ext JS 6 Bootcamp
12/04/2017

Nesting Components in Containers

Page of 168

Ext.Container extends the Ext.Component class and provides additional capabilites that allow you to nest other Components inside of it. Most application views are comprised of containers with multiple items nested within them. For example, a data entry view might contain a toolbar component, several form field components, and a docked toolbar.

The following example illustrates nesting two components inside of a container:

Using the 'auto' layout
Ext.Viewport.add([
 {
  xtype: 'container',
  cls: 'colorize',
  width: 200,
  height: 100,
  items: [
   {
    xtype: 'component',
    cls: 'colorize',
    html: 'Hello',
    margin: '5 5 5 5'
   },
   {
    xtype: 'component',
    cls: 'colorize',
    html: 'World',
    margin: '5 5 5 5'
   }
  ]
}
]);

Specifying Default Item Config Properties

Use the Ext.Container defaults property to specify a series of configuration properties to be applied to all of the components nested one level deep in the items array. As illustated by the following example which optimizes the code sample above, using this technique can significantly reduce the amount of effort to configure nested components.

Using the defaults config property
Ext.Viewport.add([
 {
  xtype: 'container',
  cls: 'colorize',
  width: 200,
  height: 100,
  defaults: {
    xtype: 'component',
    cls: 'colorize',
    margin: '5 5 5 5'
  },
  items: [
   { html: 'Hello' },
   { html: 'World' }
  ]
}
]);

Specifying a Layout Manager

If you nest components inside of a container you should also define a layout. Layouts determine how the child Components should be arranged and sized on the screen. You will typically use the following layout managers:

Layout Description
hbox Arranges components along a horizontal axis
vbox Arranges components along a vertical axis
fit Scales the first item in the items array to fit all available space.
card Stacks nested components into a virtual card deck. Each nested component is sized to fit the available space of the container. When a card becomes active it covers up the other nested components.

Note: You can also define your own custom layouts by extending the Ext.layout.Abstract class.

 

Page of 168
comments powered by Disqus