Sencha Touch - List with Search-Field (XMLStore) - list

Question

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

Answer 1

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