Sencha Touch 2: Add spinner field with increment/decrement value

As requested by one of my reader, today we are going to see how to add Spinner form field (Ext.field.Spinner) in Sencha Touch 2. Also we are going to see how to apply increment/decrement values by clicking '+' and '-' icons in the Spinner Fields.

Let's see the implementation

Ext.define('MyApp.view.MyFormPanel', {
    extend: 'Ext.form.Panel',
    alias: 'widget.MyFormPanel',

    config: {
        items: [{
            xtype: 'titlebar',
            docked: 'top',
            title: 'Spinner Demo'
        }, {
            xtype: 'spinnerfield',
            label: 'Spinner',
            maxValue: 100,
            minValue: 1,
            stepValue: 1,
            cycle: true,
            defaultValue: 1
        }]
    }
});

Following is the output, when i run the above code in the Web-Kit Chrome Browser.

Following are the important configurations available in the Spinner form field.

minValue: the minimun allowed value for this field.
maxValue: the maximum allowed value for this field.
defaultValue: the default value for this field when no value is set
cycle: When set to true, it will loop the values of a minimum or maximum is reached. If the maximum value is reached, the value will be set to the minimum.
stepValue: Value that is added or subtracted from the current value when a spinner (+/-) icon is clicked.

for additional parameters, please refer the documentation.

Hope, you enjoyed this Post.