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 Email, Number, and URL Fields

Page of 168
Using an email field

Instantiating Email Fields

The Email field (xtype: emailfield) extends the Ext.field.Text class and outputs an HTML5 <input type="email"> component to the browser. Most browsers will display an optimized keyboard to faciliate data entry as illustrated below:

Ext.define('MyApp.view.MyForm', {
 extend: 'Ext.form.Panel',
 alias: 'widget.myform',
 config: {
  items: [
   {
    xtype: 'emailfield',
    label: 'Field',
    name: 'useremail',
    placeHolder: 'email@example.com'
   }
  ]
 }
});

Number fields produce optimized onscreen keyboards

Instantiating Number Fields

The Ext.field.Number (xtype: numberfield) class outputs an <input type="number"> field that in most browsers results in an optimized onscreen keyboard experience. You can set min/max boundries and the user is precluded from inputting alpha characters.

Class-specific configuration properties include the following:

Config Property Description
maxValue The maximum allowed value.
minValue The minimum allowed value.

The following code was used to produce the output in the illustration on the right.

Ext.define('MyApp.view.MyForm', {
 extend: 'Ext.form.Panel',
 alias: 'widget.myform',
 config: {
  items: [
   {
    xtype: 'numberfield',
    label: 'Salary',
    value: 50000,
    maxValue: 150000,
    minValue: 30000
   }
  ]
 }
});

A spinner field

Instantiating Spinner Fields

The Ext.field.Spinner (xtype: spinnerfield) class outputs a readonly <input type="number"> field. A spinner control is added to faciliate the user with incrementing/decrementing the value by a specified step number. The user is not allowed to type a number via an onscreen keyboard. All input is solely controlled by the spinner.

Class-specific configuration properties include the following:

Config Property Description
maxValue The maximum allowed value.
minValue The minimum allowed value.
stepValue The amount by which the value is incremented or decremented when the user taps on the spinner controls.
cycle Cycles the input to the minimum value once the maximum has been exceeded.

The following example defines a spinner that allows a user to enter an integer between 30,000 and 150,000, in increments of 1000.

Ext.define('MyApp.view.MyForm', {
 extend: 'Ext.form.Panel',
 alias: 'widget.myform',
 config: {
  items: [
   {
    xtype: 'spinnerfield',
    label: 'Salary',
    maxValue: 150000,
    minValue: 30000,
    stepValue: 1000,
    defaultValue: 50000
   }
  ]
 }
});

URL field with optimized on-screen keyboard

Instantiating URL Fields

The URL field (Ext.field.Url, xtype: urlfield) inherits from the Ext.field.Text component and outputs an HTML5 <input type="url"> element. Most browsers will display a specialized keyboard as illustrated by the following example:

Ext.define('MyApp.view.MyForm', {
 extend: 'Ext.form.Panel',
 alias: 'widget.myform',
 config: {
  items: [
   {
    xtype: 'urlfield',
    label: 'Web Site',
    placeHolder: 'http://example.com'
   }
  ]
 }
});
Page of 168
comments powered by Disqus