Sencha Touch Cookbook
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

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.
  4. 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
}]

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
上一章目录下一章