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

首頁 >

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
主站蜘蛛池模板： 甘德县| 绵竹市| 黄石市| 白玉县| 潼关县| 鄯善县| 卢氏县| 贵港市| 梁平县| 金阳县| 东乌| 鹤山市| 五常市| 体育| 晴隆县| 六盘水市| 霍城县| 柘荣县| 龙口市| 连城县| 铜山县| 巴彦淖尔市| 双牌县| 常熟市| 噶尔县| 藁城市| 理塘县| 台北市| 东莞市| 镇沅| 贵阳市| 达州市| 水城县| 上虞市| 武隆县| 绩溪县| 布尔津县| 平度市| 丰台区| 克什克腾旗| 北海市|