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([]);
}
});
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.
Leave a Comment