官术网_书友最值得收藏!

首頁 >

Sencha Touch Cookbook

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
主站蜘蛛池模板： 武夷山市| 涞源县| 东港市| 阿图什市| 普洱| 石屏县| 平度市| 漠河县| 上犹县| 改则县| 靖远县| 通江县| 姚安县| 桓台县| 达孜县| 无锡市| 平凉市| 万载县| 永川市| 怀集县| 景泰县| 顺平县| 明溪县| 富源县| 读书| 海晏县| 行唐县| 茌平县| 兴隆县| 孟村| 盐边县| 北票市| 神池县| 兰溪市| 峨眉山市| 皮山县| 宣汉县| 吉木萨尔县| 隆回县| 喀喇沁旗| 沅江市|