Monday 30 September 2013

Sencha Touch : How to add Toggle input form field

Sencha Touch 2 supports different form input fields like Text, TextArea, CheckBox, Radio etc.. which are used to create a form. Today we are going to see how to add a Toggle field into the Sencha Touch form. This Toggle input field will supports two values. This field is used when you want users to input one value from the available two values. These values may be 0 (or) 1 and ON (or) OFF etc.
Let's see the implementation

Ext.define('MyApp.view.MyFormPanel', {
    extend: 'Ext.form.Panel',
    alias: 'widget.MyFormPanel',

    config: {
        items: [
            {
                xtype: 'titlebar',
                docked: 'top',
                title: 'Toggle Demo'
            },
            {
                xtype: 'togglefield',
                label: 'Are you Married',
                labelWidth: '50%',
                labelWrap: true,
                name: 'userInput',
                value: 1
            }
        ]
    }
});

Following is the output, when i run the above code in Google Chrome


For more detailed information, please refer the official documentation.

Hope, you enjoyed this Post.


No comments:

Post a Comment