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

Configuring Form Fields

Page of 168
Hierarchy and Mixins of the field Base class

The Ext.form.field.Base class is the parent class from which all other members of the Ext.form.field package inherit.

As the figure illustrates, the class also inherits from several Mixins including Ext.form.field.Field which provides a common interface for the logical behavior and state of form fields, including:

  • Getter and setter methods for field values
  • Events and methods for tracking value and validity changes
  • Methods for triggering validation

It also inherits from Ext.form.Labelable which allows a component to be configured and decorated with a label and/or error message as is common for form fields.

Most commonly used form field configs include the following:

Config Option Description
name The name of the field (defaults to undefined). This is used as the parameter name when including the field value in a form.submit() call.
fieldLabel String. The label for the field. It gets appended with the labelSeparator, and its position and sizing is determined by the labelAlign, labelWidth, and labelPad configs. Defaults to undefined.
disabled Boolean. True to disable the field (defaults to false). Disabled Fields will not be submitted in a form.submit() call. Use the setDisabled() method to toggle this behavior.
labelAlign String. Controls the position and alignment of the fieldLabel. Valid values are 'left', 'top', and 'right'
labelWidth Number. The width of the fieldLabel in pixels. Defaults to 100.
readOnly true to mark the field as readOnly in HTML (defaults to false). Note: this only sets the element's readOnly DOM attribute.
tabIndex The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyTo (defaults to undefined).
value The default value for the field.

Nearly all fields also support the following getter/setter methods:

  • getValue()
    Returns the value that would be included in a standard form submit for this field. This will be combined with the field's name to form a name=value pair in the submitted parameters.
  • setReadOnly(boolean value)
    Sets the readonly state for the field.
  • setDisabled(boolean)
    Sets the disabled state for the component.
  • setValue(Mixed value)
    Sets a data value into the field and runs the change detection and validation.

The following snippet illustrates a basic form implementation:

{
 xtype: 'form',
 title: 'Contact Info',
 width: 300,
 bodyPadding: 5,
 items: [
  {
   xtype: 'textfield',
   name: 'firstName',
   fieldLabel: 'First Name'
  }, 
  {
   xtype: 'textfield',
   name: 'email',
   fieldLabel: 'Email Address',
  }
 ],
 dockedItems:[
  {
   xtype: 'toolbar',
   dock: 'bottom',
   layout: {pack: 'center'},
   items: [
    { xtype: 'button', text: 'Submit'} 
   ]
  }
 ]
}
Page of 168
comments powered by Disqus