Sencha Touch - 带有搜索字段的列表 (XMLStore)

Question

我有一个外部 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'
            },

        }});

Answer 1

我知道这是一个老问题，但我已经设法使用它商店中的过滤器功能过滤我的列表。我是这样做的：

在我看来，我有一个文本字段 (xtype: 'searchfield')。

在此视图的控制器中，我使用“控制”属性注册了 2 个事件

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

当用户点击搜索字段组件中包含的“X”清除图标时，会调用“onSearchClearIconTap”函数来清除文本，因此我们唯一要做的就是重置过滤器我们的清单：

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