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

首頁 >

Sencha Touch Cookbook

  • Sencha Touch Cookbook
  • Ajit Kumar
  • 444字
  • 2021-08-20 15:56:10

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
主站蜘蛛池模板： 民勤县| 沈丘县| 游戏| 来凤县| 大足县| 张北县| 页游| 嘉黎县| 雅江县| 阿坝县| 沅江市| 布拖县| 西充县| 沈阳市| 关岭| 南安市| 汤阴县| 绥芬河市| 新津县| 温州市| 玛纳斯县| 镇坪县| 临海市| 云梦县| 琼中| 蕲春县| 高尔夫| 龙里县| 临沭县| 兰溪市| 犍为县| 惠安县| 米易县| 南木林县| 汝城县| 临夏市| 尼勒克县| 嵊泗县| 禹州市| 思茅市| 永德县|