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

Assigning Default Configuration Values

Page of 168

Forms typically contain many form field components that have similar configuration properties. In order to reduce the number of individual config assignments that you'll need to perform and make your form definition easier to maintain, Ext enables you to configure the following properties:

  • defaults : Applies default settings to all components in a container's items array, nested one level deep. Defaults are applied regardless of whether a component was added through the items config or dynamically via the add() or insert() methods.

    Defaults do not override existing properties or explicitly configured properties of an item.
  • fieldDefaults: Applies default config values for properties in the Ext.form.Labelable class throughout all nested levels of items arrays.

    FieldDefaults do not not override existing properties or explicitly configured properties of an item.

The following code snippet illustrates using the defaults and fieldDefaults to configure the form fields in the window depicted in the figure below:

Using the defaults and fieldDefaults properties to apply configs to multiple form fields

Ext.create('Ext.window.Window', {
 title: 'Simple Form',
 width: 350,
 layout: 'fit',
 items: [
  {
   xtype: 'form',
   bodyPadding: 5,
   defaults: {
    xtype: 'textfield',
    anchor: '100%'
   },
   fieldDefaults: {
    labelSeparator: '*:'
   },
   items: [
    {
     fieldLabel: 'First Name',
     name: 'first'
    },
    {
     fieldLabel: 'Last Name',
     name: 'last'
    },
    {
     xtype: 'fieldset',
     collapsible: true,
     title: 'Contact Info',
     defaults: {
       xtype: 'textfield',
       anchor: '100%'
     },
     items: [
      {
       name: 'email',
       fieldLabel: 'Email'
      },
      {
       name: 'phone',
       fieldLabel: 'Phone'
      }
     ]
    }
  ],
  dockedItems: [
   {
    xtype: 'toolbar',
    dock: 'bottom',
    layout: {pack: 'center'},
    items: [
     { xtype: 'button', text: 'Submit'} 
    ]
   }
  ]
 }
]   
}).show();

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