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

  Modified On Nov-29-2017 10:31:46 PM

Leave Comment