Sencha Touch - список с полем поиска (XMLStore) - PullRequest
Новая
       27

Sencha Touch - список с полем поиска (XMLStore)

0 голосов
/ 08 июня 2011

У меня есть внешний XML-файл, который я использую для заполнения своего списка.Это прекрасно работает.

Но теперь я хочу отфильтровать (выполнить поиск) XML-данные с помощью поля поиска в верхней части списка.

Мой список выглядит следующим образом: 

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

А мой XML-ввод выглядит так: 

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'
            },

        }});

1 Ответ

1 голос
/ 01 августа 2012

Я знаю, что это старый вопрос, но мне удалось отфильтровать мой список с помощью функции фильтра в его магазине. Вот как я это сделал:

На мой взгляд, у меня есть текстовое поле (xtype: 'searchfield') .

В контроллере для этого представления я зарегистрировался на 2 события, используя свойство 'control' 

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

Функция onSearchKeyUp выглядит следующим образом (примечание: поле, которое я собираюсь фильтровать, является '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];  
            }  
        });  
    }  
}

Вместо этого вызывается функция onSearchClearIconTap, когда пользователь нажимает на значок очистки, который является «X», включенным в компонент поля поиска, который очищает текст, поэтому единственное, что мы хотим сделать, - сбросить фильтр для наш список: 

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