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

首頁 >

Sencha Touch Cookbook

Checkbox and Checkbox group

Checkboxes permit the user to make multiple selections from a number of available options. It is a convenient way to learn about user choices. For example, in an application, we may have a checkbox asking the user if he/she stayed in Hyderabad. Moreover, if we are capturing the detail about multiple cities where the user had stayed, then we would group multiple checkboxes under one name and use them as a checkbox group. In this recipe, we will see how we can create a checkbox and a checkbox group using Sencha Touch and how to handle the values when you want to set them, or when the form data is posted.

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_09.js.
  2. Open a new file named ch02_09.js and replace the definition of formBase with the following code: 
    var formBase = {
  items: [{
    xtype: 'checkboxfield',
    name: 'city',
    value: 'Hyderabad',
    label: 'Hyderabad',
    checked: true
    }, {
      xtype: 'checkboxfield',
      name: 'city',
      value: 'Mumbai',
      label: 'Mumbai'
  }]
};
  3. Include ch02_09.js in place of ch02_08.js in index.html.
  4. Deploy and access the application in the browser. You will see the checkboxes as shown in the following screenshot:
    How to do it...

How it works...

The preceding code creates two checkboxes inside the form panel. checked: true checks the checkbox when it is rendered. When a form is submitted, the checkbox values are returned as an array. For example, given the preceding code, when the user clicks on Submit, city would have two values, as follows:

city: ['Hyderabad', 'Mumbai']

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
主站蜘蛛池模板： 革吉县| 剑阁县| 香港 | 商河县| 香格里拉县| 剑河县| 石阡县| 青阳县| 长武县| 万全县| 即墨市| 应城市| 调兵山市| 大兴区| 潮安县| 辽中县| 托里县| 高州市| 汉川市| 灵武市| 濮阳县| 东海县| 延川县| 黑河市| 天水市| 兖州市| 镇沅| 东港市| 松潘县| 深水埗区| 高青县| 友谊县| 嘉峪关市| 尖扎县| 济源市| 礼泉县| 普宁市| 江津市| 宜良县| 福贡县| 临高县|