Sencha Touch Cookbook
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

Text and TextArea

Text fields are one of the initial fields which allow the user to enter data in a form. Text area allows entering multiple lines of text. In this recipe, we will make use of the text and text area related classes.

Getting ready

Make sure that you have set up your development environment by following the recipes outlined in Chapter 1.

Make sure that you have followed the Getting your form ready with FormPanel recipe in this chapter.

How to do it...

Carry out the following steps:

  1. Copy ch02_01.js to ch02_10.js.
  2. Open a new file named ch02_10.js and replace the definition of formBase with the following code: 
    var formBase = {
  items: [
    {
      xtype: 'textfield',
      name : 'firstName',
      label: 'First Name'
    },
    {
      xtype: 'textfield',
      name : 'lastName',
      label: 'Last Name'
    },
    {
      xtype: 'textareafield',
      name : 'detail',
      label: 'Detail'
    }
  ]
};
  3. Include ch02_10.js in place of ch02_09.js in index.html.
  4. Deploy and access the application in the browser.

How it works...

In the preceding code, we created two text fields and a text area. Text field can be constructed by using the Ext.form.Text class instance or by using the xtype—textfield. Similarly, a text area can be constructed by using the Ext.form.TextArea class instance or by using xtype—textareafield . Internally, the text form field implements the HTML <input> element with type="text" whereas text area implements the HTML <textarea> element. There is no validation on these fields, hence the user is allowed, by default, to enter any kind of value.

There's more...

By default, a text field or a text area allows entering any number of characters. However, in some specific scenarios, we may have to limit this to a particular value in our application. Let's see how we can limit this.

Limiting the number of input characters

Both text field and text area support a property named maxLength which controls the number of characters the user can enter. If this property is set to 20, then the user can only enter 20 characters. The following code snippet shows how to do this:

{
  xtype: 'textfield',
  name : 'firstName',
  maxLength: 20,
  label: 'First Name'
},
{
  xtype: 'textareafield',
  name : 'detail',
  maxLength: 80,
  label: 'Detail'
}

See also

  • The recipe named Setting up the Android-based development environment in Chapter 1
  • The recipe named Setting up the iOS-based development environment in Chapter 1
  • The recipe named Setting up the Blackberry-based development environment in Chapter 1
  • The recipe named Setting up the browser-based development environment in Chapter 1
  • The recipe named Setting up the production environment in Chapter 1
  • The recipe named Getting your form ready with FormPanel in this chapter
上一章目录下一章