Sencha Touch - List with Search-Field (XMLStore)

I have a external XML-file which I use to filling my list. This works great.

But now I want to filter(search) the XML-data with a search-field on top of the list.

My List looks like this:

ToolbarDemo.views.Beitrage = Ext.extend(Ext.List, {
title: "Beiträge",
iconCls: "btnbeitraege",
id: 'disclosurelist',
        store: storeXML,
        itemTpl: '<div class="contact"><img src="{bild}" width="96" height="52" border="0"/> {titel}</div>',
        grouped: true,
        onItemDisclosure: function(record, btn, index开发者_如何学C) {
            Ext.Msg.alert('', '<video width="200" height="200" x-webkit-airplay="allow" poster="'+ record.get('bild') +'" controls="controls" id="video_player" style="" tabindex="0"><source src="'+ record.get('video') +'"></source></video>', Ext.emptyFn);
        } });storeXML.load();

And my XML-input looks like this:

Ext.regModel('beitrag', {fields: ['datum', 'titel', 'video', 'bild']});

var storeXML = new Ext.data.Store({
        model: 'beitrag',
        sorters: [
    {
        property : 'Datum',
        direction: 'DESC'
    }],
getGroupString : function(record) {
    var month = record.get('datum').split('-');
    return month[2] + '.' + month[1] + '.' + month[0];
},
        method: 'GET',
        proxy: {
            url: 'beitraege.xml',
            type: 'ajax',                
            reader: {
                type: 'xml',                    
                record: 'beitrag',
                root: 'beitraege'
            },

        }});

I know it's an old question, but I have managed to filter my list using a filter function in it's store. Here is how I did:

In my view I have a text field (xtype: 'searchfield').

In the controller for this view I have registered for 2 events by using the 'control' property

control: {
    'searchfield': {
            clearicontap: 'onSearchClearIconTap',  
            keyup: 'onSearchKeyUp'
    }
}

onSearchKeyUp function looks like this (note: the field I'm going to filter is 'docName')

onSearchKeyUp: function(field)
{
    var value = field.getValue(),  
        store = this.getMaster().getStore();

    store.clearFilter();

    if (value) 
    {
        var searches = value.split(' '),  
            regexps = [],  
            i;

        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'));  
        }

        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('docName').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];  
            }  
        });  
    }  
}

The 'onSearchClearIconTap' function instead is called when the user taps on the clear icon that is the 'X' included in the searchfield component, that clears the text, so the only thing we want to do is to reset the filter for our list:

onSearchClearIconTap: function()
{
    this.getMaster().getStore().clearFilter();  
}