Sencha Touch 2 Список поиска

Question

У меня возникли проблемы с проектированием и получением поля поиска для работы, я не знаю, как это сделать, я могу увидеть любую документацию или образец кода на Sencha Touch 2. любая помощь будет оценена. это мой нынешний этап:

`Ext.define('ikhlas.view.SearchProfile', { 
extend: 'Ext.Panel', 
xtype: 'searchpanel', 

    config:{ 
      title: 'Search', 
       iconCls: 'search', 
       scrollable: true, 
       styleHtmlContent: true, 

    items: [ 
     { 
      xtype: 'fieldset', 
       title:'Search Profile', 
       iconCls:'add', 

    items: [ 

      { 

      xtype: 'searchfield', 
       name:'searchfield', 
       placeHolder:'Search', 
      }, 

      ]  

     }, 

      ] 

     } 

});` 

И мой контроллер выглядит следующим образом (отмечая было сделано, я не знаю, как начать помощь PLS):

Ext.define('ikhlas.controller.SearchField',{ 
extend: 'Ext.app.Controller', 

config:{ 
    refs:{ 
     submitpanel:'loginpanel' 
    }, 

control:{ 

    } 
}, 

    }); 

А вот список Дейтов я хочу АВТОПОИСК:

data: [ 
      {firstName: 'Tommy', lastName: 'Maintz'}, 
      {firstName: 'Rob',  lastName: 'Dougan'}, 
      {firstName: 'Ed',  lastName: 'Spencer'}, 
      {firstName: 'Jamie', lastName: 'Avins'}, 
      {firstName: 'Aaron', lastName: 'Conran'}, 
      {firstName: 'Dave', lastName: 'Kaneda'}, 
      {firstName: 'Michael', lastName: 'Mullany'} 

я хочу поле поиска, чтобы работать таким образом, что когда пользователь печатает характер, он будет автоматически выскочит предложение так же, как: http://docs.sencha.com/touch/2-0/#!/example/search-list

Answer 1

В вашем контроллере вы должны прослушивать два события, clearicontap и keyup для поля поиска.

... 
control: { 
    'searchfield': { 
     keyup: 'onSearchQueryChanged', 
     clearicontap: 'onSearchReset' 
    } 
}, 

onSearchQueryChanged: function(field) { 
    // as in sample 
    //get the store and the value of the field 
     var value = field.getValue(), 
      store = this.getStore(); //you should actually point to the real store 

     //first clear any current filters on thes tore 
     store.clearFilter(); 

     //check if a value is set first, as if it isnt we dont have to do anything 
     if (value) { 
      //the user could have entered spaces, so we must split them so we can loop through them all 
      var searches = value.split(' '), 
       regexps = [], 
       i; 

      //loop them all 
      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')); 
      } 

      //now filter the store by passing a method 
      //the passed method will be called for each record in the store 
      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('firstName').match(search) || record.get('lastName').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]; 
       } 
      }); 
     } 
}, 

onSearchReset: function(field) { 
    this.getStore().clearFilter(); 
} 

... 

В этом примере будет эмулировать такое же поведение, как и в ST2 SDK, который фильтрации магазин Ext.List. Естественно, вы, вероятно, в конечном итоге реализуете свою собственную логику фильтрации.

Отметьте, что searchfield - это не что иное, как стильный textfield, обычно с кнопкой очистки справа (зависит от браузера/os), как определено в HTML5.