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 Text Fields

Page of 168

Configuring Text Fields

Text fields support several class-specific properties that can help your users minimize their typing:

Config Property Description
autoCapitalize Boolean. Sets the html input field's autocapitalize attribute.
autoComplete Boolean. Configures the html input field's autocomplete attribute.
autoCorrect Boolean. Configures the html input field's autocorrect attribute.
readOnly Boolean. Configures the html input field's readonly attribute.

The following example illustrates configuring a series of text fields:

Using 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,
      autoCapitalize: true,
      placeHolder: 'First Name'
     },
     {
      xtype: 'textfield',
      label: 'Last',
      name: 'lastName',
      required: true,
      autoCapitalize: true,
      placeHolder: 'Last Name'
     },
     {
      xtype: 'textfield',
      label: 'Address',
      name: 'address',
      autoComplete: true,
      autoCorrect: true,
      placeHolder: 'Street Address'
     }
    ]
   }
  ]
 }
});

Using the component property to configure the onscreen keyboard

Use the textfield's component property to affect the onscreen keyboards for iOS and android. In the following example, the component property is used to set the generated form field's input type to <input type="tel">, resulting in IOS displaying its numeric keypad.

Using the tel input type to change the onscreen keyboard
Ext.define('MyApp.view.MyForm', {
 extend: 'Ext.form.Panel',

 config: {
  items: [
   {
    xtype: 'fieldset',
    title: 'Contact Info',
    items: [
     {
      xtype: 'textfield',
      component: {
       xtype: 'input',
       type: 'tel'
      },
      label: 'Phone',
      name: 'phone',
      placeHolder: 'cell #'
     }
    ]
   }
  ]
 }
});
Page of 168
comments powered by Disqus