O'Reilly logo

Learning Ext JS - Fourth Edition by Armando Gonzalez, Crysfel Villa, Carlos A. Méndez

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required