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'）。

在控制器的這種觀點我都用「控制」屬性

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

onSearchKeyUp功能看起來像這樣（注註冊2個事件：我要過濾的字段是「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」列入searchfield組件，即清除文本，而不是被調用，所以我們要做的唯一事情是重置我們列表的過濾器：

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