Learning Ext JS - Fourth Edition

The field container

There are times when we need to group more fields or components other than checkboxes and radio buttons. Ext JS provides a field container for grouping of any type of field.

One of the advantages of using a field container is the ability to use a layout; we can use any of the available layouts in the framework. You learned about layouts in previous chapters.

The following code shows how we can group a textfield and a combobox to show these fields in the same line. Now we have to add two new fields and the field container:

var myFieldContainer = {
  xtype: 'fieldcontainer', //step 1
  height: '',
  fieldLabel: 'Shoes / Dress size',
  layout: { type: 'hbox', align: 'stretch' }, //step 2
  items: [{
       xtype: 'numberfield',
       flex: 1, hideLabel:true ...