Checkbox and Checkbox group_Sencha Touch Cookbook-QQ阅读男生轻小说网

上QQ阅读APP看书，第一时间看更新

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:

Copy ch02_01.js to ch02_09.js.

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'
  }]
};

Include ch02_09.js in place of ch02_08.js in index.html.
Deploy and access the application in the browser. You will see the checkboxes as shown in the following screenshot:

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']