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

Grouping Fields in a FieldContainer

Page of 168

Ext.form.FieldContainer (xtype: fieldcontainer) is a container that has a label applied to it. This enables you to easily group fields or other components adjacent to a single label on a form.

The following code snippet illustrates how to use a fieldcontainer to group firstname and lastname fields under a single label:

Using a FieldContainer to group fields under a common label
{
 xtype: 'form',
 bodyPadding: 5,
 items: [
  {
   xtype: 'fieldcontainer',
   layout: 'hbox',
   fieldLabel: 'Name',
   defaults: {
     flex: 1,
     xtype: 'textfield'
   }
   items: [
    {
     name: 'firstname',
     fieldLabel: '',
     hideLabel: true,
     emptyText: 'First Name'
    },
    {
     name: 'lastname',
     fieldLabel: '',
     hideLabel: true,
     emptyText: 'Last Name'
    }
   ]
  },
  {
    xtype: 'datefield',
    anchor: '100%',
    name: 'date',
    fieldLabel: 'Date'
  }
 ]
}

Note: Use the Ext.form.CheckboxGroup to group checkboxes or the Ext.form.RadioGroup class to group radio buttons as they are specialized for those types.

Page of 168
comments powered by Disqus