Users Pricing

articles

home / developersection / articles / spinner field in sencha touch

Spinner Field in Sencha Touch

Sumit Kesarwani 8325 21 Jun 2013 Updated 07 Sep 2019

 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


Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md