Spinner Field in Sencha Touch           

In this article, I’m explaining the spinner field in sencha touch and how to use it in our application.

Spinner field wraps an HTML5 number field.

Example

Ext.define('MyApp.view.MyFormPanel', {

    extend: 'Ext.form.Panel',

 

    config: {

        items: [

            {

                xtype: 'titlebar',

                docked: 'top',

                title: 'Spinner Field'

            },

            {

                xtype: 'fieldset',

                instructions: '<code>minValue = 10; maxValue = 30; increment = 2;</code>',

                title: '',

                items: [

                    {

                        xtype: 'spinnerfield',

                        increment: '2',

                        label: 'Spinner Field :',

                        maxValue: 30,

                        minValue: 10

                    }

                ]

            }

        ]

    }

});

 

Output

Spinner Field in Sencha Touch

When you click/tap on the Plus sign tab the value increases:

Spinner Field in Sencha Touch

When you click/tap on the Minus sign tab the value decreases:

Spinner Field in Sencha Touch

Leave Comment