articles

Home / DeveloperSection / Articles / Select Field in Sencha Touch

Select Field in Sencha Touch

Sumit Kesarwani 10419 20-Jun-2013

In this article, I’m explaining the select field in sencha touch.

Example

Drag-n-drop the form panel and toolbar

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

    extend: 'Ext.form.Panel',
 
    config: {
        items: [
            {
                xtype: 'toolbar',
                docked: 'top',
                title: 'Select Field',
                items: [
                    {
                        xtype: 'button',
                        id: 'GetSelectedValue',
                        itemId: 'mybutton',
                        text: 'Get Selected Value'
                    }
                ]
            },
            {
                xtype: 'fieldset',
                height: 100,
                instructions: 'Please select a product ',
                title: '',
                items: [
                    {
                        xtype: 'selectfield',
                        height: 41,
                        id: 'ProductList',
                        label: 'Product :',
                        options: [
                            {
                                text: 'MindStick Data Converter',
                                value: 'MindStick Data Converter'
                            },
                            {
                                text: 'MindStick Survey Manager',
                                value: 'MindStick Survey Manager'
                            },
                            {
                                text: 'MindStick Cleaner',
                                value: 'MindStick Cleaner'
                            }
                        ]
                    }
                ]
            }
        ],
        listeners: [
            {
                fn: 'onGetSelectedValueTap',
                event: 'tap',
                delegate: '#GetSelectedValue'
            }
        ]
    },
 
    onGetSelectedValueTap: function(button, e, eOpts) {
        Ext.Msg.alert('Selected Product', Ext.getCmp('ProductList').getValue());
    }
});

 Output

Select Field in Sencha Touch

Select Field in Sencha Touch

Select Field in Sencha Touch


Updated 07-Sep-2019

Leave Comment

Comments

Liked By