Sencha Touch Cookbook

Spinning the number wheel using Spinner

This recipe describes the use of a spinner form field, which allows the user to change the value by clicking on the wheel.

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_07.js.
2. Open a new file named ch02_07.js and replace the definition of formBase with the following code:

   var formBase = {
     items: [{
       xtype: 'spinnerfield',
       name : 'spinner',
       label: 'Spinner',
       minValue: 0,
       maxValue: 100,
       incrementValue: 10,
       cycle: true
     }]
   };

3. Include ch02_07.js in place of ch02_06.js in index.html ...