поле поиска в dataview в extjs

Question

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

Но, что я пытаюсь сделать, это запустить функцию поиска только тогда, когда пользователь ввел по крайней мере 3 символа в текстовое поле. Как я могу это сделать?

Код ниже

Посмотреть

var DownloadsPanel = { 
      xtype : 'panel', 
      border : false, 
      title : LANG.BTDOWNLOADS, 
      items : [{ 

       xtype : 'toolbar', 
       border : true, 
       baseCls : 'subMenu', 
       cls : 'effect1', 
       dock : 'top', 
       height : 25, 
       items : [{ 
        xtype : 'textfield', 
        name : 'SearchDownload', 
        itemId : 'SearchDownload', 
        enableKeyEvents : true, 
        fieldLabel : LANG.DOWNLOADSF3, 
        allowBlank : true, 
        minLength : 3 
       }], 
{ 

       xtype : 'dataview', 
       border : false, 
       cls : 'catalogue', 
       autoScroll : true, 
       emptyText : 'No links to display', 
       selModel : { 
        deselectOnContainerClick : false 
       }, 
       store : DownloadsStore, 
       overItemCls : 'courseView-over', 
       itemSelector : 'div.x-item', 
       tpl : DownloadsTpl, 
       id : 'cataloguedownloads' 

      }] 

Контроллер:

init : function() { 

     this.control({ 
      // reference to the text field in the view 
       '#SearchDownload' :{ 
        change: this.SearchDownloads 

      } 
}); 

SearchDownloads : function(){ 
      console.log('Search functionality') 

     } 

UPDATE 1: я смог достать слушателя после трех символов были введены с использованием ниже код:

Con troller

'#SearchDownload' :{ 
        keyup : this.handleonChange,  
      }, 

     handleonChange : function(textfield, e, eOpts){ 

      if(textfield.getValue().length > 3){ 

       console.log('Three'); 
      } 
    } 

любые рекомендации или примеры того, как выполнить поиск в хранилище данных, будут оценены.

Answer 1

Правильный способ: подписаться на мероприятие, посвященное событию поля, и проверить, должно ли новое значение иметь не менее 3 символов перед продолжением.

'#SearchDownload' :{ change: this.handleonChange } 
// othoer code 
handleonChange : function(textfield, newValue, oldValue, eOpts){ 
     if(newValue.length >= 3){ 
      console.log('Three'); 
     } 
} 

КПП. Я рекомендую использовать строчные и «-» разделенные имена для id. В вашем случае

itemId : 'search-download' 

Редактироватьприменить фильтр

Чтобы применить фильтр я хотел бы использовать filter Я думаю, вы теперь поле, которое вы хотите фильтровать? Позволяет делать вид store является переменным в контроллере, чем вы можете заменить console.log() с

this.store.filter('YourFieldName', newValue); 

Вторых паров также может быть регулярным выражением, используя значение, как в примере

this.store.filter('YourFieldName', new RegExp("/\"+newValue+"$/")); 

Конечно вы можете также использовать a Функция

this.store.filter({filterFn: function(rec) { return rec.get("YourFieldName") > 10; }}); 

Answer 2

Спасибо вам большое за ваши ответы. Вот что я сделал, основываясь на комментариях

filterDownloads : function(val, filterWh){ 

     if(filterWh == 1){ 
      var store = Ext.getStore('CatalogueDownloads'); 
      store.clearFilter(); 
      store.filterBy(function (r){ 
       var retval = false; 
       var rv = r.get('title'); 
       var re = new RegExp((val), 'gi'); 
       retval = re.test(rv); 

       if(!retval){ 
        var rv = r.get('shortD'); 
        var re = new RegExp((val), 'gi'); 
        retval = re.test(rv); 
       } 

       if(retval){ 
        return true; 
       } 

       return retval; 
      }) 




     } 

    } 

Answer 3

я думаю, что есть пример того, что именно вы пытаетесь для того чтобы достигнуть .. http://docs.sencha.com/ext-js/4-0/#!/example/form/forum-search.html