Question

我遇到的问题是如何在树存储上实现搜索字段，从服务器中获取数据。在工艺代码中，我们将不胜感激。

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

它会帮助你：）

Answer 2

假设搜索时数据已经存储在商店中，使用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] );
}

这假设您要搜索keyup。您可能希望改为使用“action”事件。

Answer 3

假设您已在商店中拥有数据。这是工作代码：

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

Answer 4

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

此example说明了如何根据您在搜索字段中输入的内容过滤列表中的数据。

希望有所帮助

在sencha touch中实现搜索字段功能

4 个答案: