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

Toggle field is a specialized Ext.field.Slider with a single thumb which only supports two values either 0 or 1.

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

    extend: 'Ext.form.Panel',
 
    config: {
        id: 'FormPanel',
        items: [
            {
                xtype: 'toolbar',
                docked: 'top',
                items: [
                    {
                        xtype: 'segmentedbutton',
                        id: 'ToolbarSegmentedButton',
                        itemId: 'mysegmentedbutton',
                        items: [
                            {
                                xtype: 'button',
                                id: 'Toggle',
                                itemId: 'mybutton',
                                text: 'Toggle'
                            },
                            {
                                xtype: 'button',
                                id: 'setValue',
                                itemId: 'mybutton1',
                                text: 'setValue(0)'
                            },
                            {
                                xtype: 'button',
                                id: 'setValue1',
                                itemId: 'mybutton2',
                                text: 'setValue(1)'
                            }
                        ]
                    }
                ]
            },
            {
                xtype: 'fieldset',
                title: '',
                items: [
                    {
                        xtype: 'togglefield',
                        id: 'ToggleField',
                        label: 'Toggle Field :'
                    }
                ]
            }
        ],
        listeners: [
            {
                fn: 'onToggleTap',
                event: 'tap',
                delegate: '#Toggle'
            },
            {
                fn: 'onSetValueTap',
                event: 'tap',
                delegate: '#setValue'
            },
            {
                fn: 'onSetValue1Tap',
                event: 'tap',
                delegate: '#setValue1'
            },
            {
                fn: 'onToolbarSegmentedButtonToggle',
                event: 'toggle',
                delegate: '#ToolbarSegmentedButton'
            }
        ]
    },
 
    onToggleTap: function(button, e, eOpts) {
        Ext.getCmp('ToggleField').toggle();
    },
 
    onSetValueTap: function(button, e, eOpts) {
        Ext.getCmp('ToggleField').setValue(0);
    },
 
    onSetValue1Tap: function(button, e, eOpts) {
        Ext.getCmp('ToggleField').setValue(1);
    },
 
    onToolbarSegmentedButtonToggle: function(segmentedbutton, button, isPressed, eOpts) {
        segmentedbutton.setPressedButtons([]);
    }
});

 Output

Toggle Field in Sencha Touch

When you click/tap on the Toggle button, the value toggles from 0 to 1 and same functionality you can have by tapping on setValue(0) and setValue(1) buttons.

Toggle Field in Sencha Touch

  Modified On Nov-18-2017 11:10:02 AM

Leave Comment