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());

    }

});