Click to search on your search term.
Subscribe to Fig Leaf Tutorials

Need help with a project? Contact us at
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

Configuring Data Entry Fields

Page of 168

Nearly all form field components inherit from the Ext.field.Field class, which defines the following configuration properties:

Config Property Description
disabled Boolean. Set to true to disable the field. By default, disabled fields are not transmitted as part of a form submission.
label String. The text label to associate with the field.
component Object. Enables you to specify a native html5 input type.
labelAlign String. The location of the label. Valid options are left (default), right, top, bottom.
labelWidth String. The width of the label. Defaults to 30%
name String. The input field's name attribute. As a best practice, your field names should match with their corresponding members in a data model.
placeHolder String. The value to display in text fields when no value has been entered.
required Boolean. Set to true to indicate to the user that the field must contain data prior to submission. Note that this does not, by itself, prevent form submission.
tabIndex Integer. The tab index.
value String/Number. The default value for the field.

The following example illustrates defining text fields:

Configuring Text Fields
Ext.define('MyApp.view.MyForm', {
 extend: 'Ext.form.Panel',

 config: {
  items: [
    xtype: 'fieldset',
    title: 'Contact Info',
    items: [
      xtype: 'textfield',
      label: 'First',
      name: 'firstName',
      required: true,
      placeHolder: 'First Name'
      xtype: 'textfield',
      label: 'Last',
      name: 'lastName',
      required: true,
      placeHolder: 'Last Name'
Page of 168
comments powered by Disqus