Add Search Field to Toolbar in Sencha Touch 2

Today, we are going to see how we can add search field to toolbar in Sencha Touch 2. In any Web and Mobile App, Search box plays an important role to find/search the information in the application very quickly and easily.

Let me demonstrate this by providing an example, by which search text will be shown as an alert message when search icon is clicked.

Ext.define('MyApp.view.MyContainer', {
    extend: 'Ext.Container',

    config: {
        items: [{
            xtype: 'toolbar',
            docked: 'top',
            title: 'Search My App',

            items: [{

                xtype: 'spacer'

            }, {

                xtype: 'textfield',
                itemId: 'searchfield',
                width: 250,
                placeHolder: 'Enter Search Text'

            }, {

                xtype: 'button',
                itemId: 'searchbutton',
                icon: 'true',
                iconCls: 'search'
            }]
        }],

        listeners: [{
            fn: 'onMybuttonTap',
            event: 'tap',
            delegate: '#searchbutton'
        }]
    },

    onMybuttonTap: function (button, e, eOpts) {

        var me = this;
        var toolbarObj = Ext.ComponentQuery.query('toolbar')[0];
        var searchText = toolbarObj.down('#searchfield').getValue();
        Ext.Msg.alert(searchText);
    }

});

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

Hope, you enjoyed this Post.