带有搜索字段的Sencha触觉列表(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];  
            }  
        });  
    }  
}

相反，当用户点击searchfield组件中包含的“X”图标(清除文本)时，将调用“onSearchClearIconTap”函数，因此我们要做的唯一一件事就是重置列表的筛选器：

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