在Sencha Touch中实现搜索栏功能

Question

我遇到了一个问题, 就是如何在Sencha Touch中实现从服务器获取数据并将其放入树形存储的搜索字段。非常感谢任何可行的代码。

- sahil

---

也许你应该查看文档中的这个示例，以了解如何实现树形存储。使用方法find()或findBy()来查询存储。 - speznaz

Answer 1

在搜索框中，您可以使用键盘上的向上箭头事件，并将存储过滤为与存储类型匹配的字符，并在列表中显示筛选数据。在选择列表项时，隐藏列表如下所示：完成。

{
    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 FilterList 的代码是

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>'
}
});

它将会帮助你 :)

- Rathore

---

我知道这种方法看起来更长，但当你的数据集变得更重时，这将是你选择优化代码的方法。 - SashaZd

Answer 2

假设您已经在存储中有数据。以下是可用的代码：

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

在控制器中将“keyup”事件绑定到该字段。

refs: {
searchName: 'searchfield[name=searchName]'
},
control: {
  searchName: {
    keyup: 'doSearch'
  }
}

为了您的搜索功能：

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

   // Now just customise the search options
    store.filter(fieldName,searchterm);
    }

- Amar1989

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] );
}

假设您想在按键松开时进行搜索。您可能希望改用“动作”事件。

- Evan Shortiss

Answer 4

使用try.sencha.com，它有很多关于如何使用框架的示例。 您需要使用Ajax存储从服务器获取数据。我认为this指南将是一个很好的开始，它还实现了一个树形存储。

这个example解释了如何根据搜索字段中输入的内容过滤列表中的数据。

希望能帮到您。

- Ram G Athreya