Question

I’m new in Sencha, I make my first application. I need to put search in the list. I looked through the example search, downloaded from Sencha, but can not figure out how to insert it in the search list. Will be glad to get any hint.
This is my app

Answer 1

I struggled with getting the search field to work in an MVC style app at first.

I was able to make a search field work in your sencha fiddle app like this.

In your controller I did

Ext.define('Sencha.controller.Main', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {
            main: 'mainpanel'
        },
        control: {
            '#list': {
                disclose: 'showDetail'
            },
            '#view':{
                activate:function(){
                    Ext.getCmp('list').add({
                        xtype:'toolbar',
                        docked:'top',
                        items:[{
                            xtype: 'searchfield',
                            itemId:'contact_search',
                            placeHolder: 'Search....',
                            listeners: {
                                scope: this,
                                clearicontap: this.onSearchClearIconTap,
                                keyup: this.onSearchKeyUp}
                        }]
                    })
                        }
            }
        }
    },

    showDetail: function(list, record) {
        this.getMain().push({
            xtype: 'recipedetail',
            title: record.fullName(),
            data: record.data
        })
            },  onSearchKeyUp: function(field) {
                //get the store and the value of the field
                var value = field.getValue(),
                    store = Ext.getCmp('list').getStore();

                //first clear any current filters on thes tore
                store.clearFilter();

                //check if a value is set first, as if it isnt we dont have to do anything
                if (value) {
                    //the user could have entered spaces, so we must split them so we can loop through them all
                    var searches = value.split(' '),
                        regexps = [],
                        i;

                    //loop them all
                    for (i = 0; i < searches.length; i++) {
                        //if it is nothing, continue
                        if (!searches[i]) continue;

                        //if found, create a new regular expression which is case insenstive
                        regexps.push(new RegExp(searches[i], 'i'));
                    }

                    //now filter the store by passing a method
                    //the passed method will be called for each record in the store
                    store.filter(function(record) {
                        var matched = [];

                        //loop through each of the regular expressions
                        for (i = 0; i < regexps.length; i++) {
                            var search = regexps[i],
                                didMatch = record.get('title').match(search);

                            //if it matched the first or last name, push it into the matches array
                            matched.push(didMatch);
                        }

                        //if nothing was found, return false (dont so in the store)
                        if (regexps.length > 1 && matched.indexOf(false) != -1) {
                            return false;
                        } else {
                            //else true true (show in the store)
                            return matched[0];
                        }
                    });
                }
            },

    /**
* Called when the user taps on the clear icon in the search field.
* It simply removes the filter form the store
*/
    onSearchClearIconTap: function() {
        //call the clearFilter method on the store instance
        this.getStore().clearFilter();
    }

});

And then in the app.js I added an ID to the viewport

launch: function() {
        Ext.Viewport.add({
            id:'view',
            xtype: 'mainpanel'
        });
    }

I also added an ID to the RecieptList.js

    xtype: 'recipelist',
    requires: ['Sencha.store.Recipes'],
    id:'list',
    config: {

Might not be the most conventional solution but it works.
It is pretty easy to see how it all works together, hope that helps.