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
},{
            xtype: 'splitter' //Step 3
    },{
      xtype: 'combobox',
      flex: 1,
      hideLabel:true,
      labelWidth: 10,
      store:Ext.create('Ext.data.Store',{
      fields  : ['id','name'],
   ...