Реализовать функциональность поля поиска в sencha touch

Question

У меня проблема с тем, как реализовать поле поиска в древовидном хранилище, получая данные с сервера в sencha touch. Любой рабочий код будет оценен.

Answer 1

В поле поиска. Вы можете использовать событие key up и отфильтровать магазин в качестве соответствия типа charterer для хранения и отображения данных фильтра в списке и при выборе элемента в списке, чтобы скрыть список, как показано ниже

{
    xtype: 'searchfield',
    name : 'Name',
    label: 'Name: ',
    id : 'Name',
    record:'Details',
    placeHolder: 'Name',
    listeners: {
      focus: function( field, e, eOpts ){
        Ext.getCmp('FilterDropDown').show();
      },
      keyup: function(field) {
        var value = field.getValue();
        var Store = Ext.getStore('Details');
        var FilterStore = Ext.getStore('FilterDetails');
        FilterStore.removeAll();
        count=0;
        var thisRegEx = new RegExp(value, 'i');
        for(cnt=0;cnt<Store.getCount();cnt++){
          if(thisRegEx.test(Store.data.items[cnt].data.name)){
            FilterStore.add({
                'id':Store.data.items[cnt].data.id,
                'name': Store.data.items[cnt].data.name,
                'email': Store.data.items[cnt].data.email

            });
          }
        }
       }
    }
  },
  {
    xtype:'FilterList',
    id: 'FilterDropDown',
    height:200,
    hidden : true,
    listeners: {
      itemtap: function( field, index, target, record, e, eOpts ){
         Ext.getCmp('Name').setValue(record.data.name); 
         Ext.getCmp('Email').setValue(record.data.email); 
         Ext.getCmp('Mobile').setValue(record.data.mobileno); 
         Ext.getCmp('FilderDropDown').hide();
      }
    }
  },

Код фильтра xtype

Ext.define('appname.view.FilterList', {
extend: 'Ext.dataview.List',
xtype: 'FilterList',
require: ['FilterDetails'],
config:{
  store: 'FilterDetails',
  scrollable: true,
  cls: 'drop_down_list',
  ui: 'round',
  itemTpl: '<div>{name}</div>'
}
});

Это тебе поможет:)

Answer 2

Если у вас уже есть данные в магазине.Вот рабочий код:

{
    xtype: "searchfield",
    name:'searchName'
}

В контроллере привязать событие «keyup» к этому полю.

Answer 3

Предполагая, что данные уже находятся в хранилище при поиске, это не слишком сложно реализовать с помощью методов, на которые ссылается speznaz.

По вашему мнению, есть xtype "searchfield" или "textfield".

{
    xtype: "searchfield",
}

В контроллере связать событие «keyup» с этим полем.

refs: {
   searchfield: 'mypanel searchfield'
},
control: {
   searchfield: {
      keyup: 'doSearch'
   }
}

Для вашей функции искать что-то вроде:

doSearch: function(searchfield, e, eOpts) {
     var searchterm = searchfield.getValue();
     var store = Ext.getStore('myStore');

     // Now just customise the search options
     store.find(fieldName, value, [startIndex], [anyMatch], [caseSensitive], [exactMatch] );
}

Предполагается, что вы хотите выполнить поиск по ключу. Вместо этого вы можете использовать событие "action".

Answer 4

Используйте try.sencha.com, там много примеров того, как использовать фреймворк.Вам нужно использовать Ajax store для получения данных с сервера.Я думаю, что это руководство будет хорошим началом для этого, оно также реализует хранилище деревьев.

Этот пример объясняет, как фильтровать данные в списке на основе того, чтоВы вводите в поле поиска.

Надеюсь, это поможет