Spinning the number wheel using Spinner_Sencha Touch Cookbook-QQ阅读男频玄幻网

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_07.js.

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

Include ch02_07.js in place of ch02_06.js in index.html.
Deploy and access the application in the browser.

How it works...

Spinner is a wrapper around the HTML5 number field. A spinner field can be constructed by using the Ext.form.Spinner class instance or by using the xtype—spinnerfield. minValue sets the initial value which will be displayed in the field when the field is rendered. maxValue: 100 is the maximum value that will be displayed in this field. incrementValue instructs the framework that on every click the value will be incremented/decremented by 10, based on the direction in which the user is moving.

There's more...

In the spinner, it may be a more sensible thing to recycle the value. The following section shows how to do this.

Recycling the values

By default, when the user reaches the maxValue or the minValue, he/she cannot move further. In this case, we may want to recycle the values. In order to do this, the spinner class provides a cycle property and setting its value to true will ensure that the value is set to minValue when the user clicks after the field value had reached the maxValue and vice versa. The following code snippet shows how to set this property:

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