在sencha touch中實現searchfield功能

Question

我遇到了問題，如何實現搜索字段樹存儲從服務器sencha touch.Any工作代碼中獲取數據將不勝感激。

Answer 1

假設數據已經在商店中，當您搜索時，使用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搜索。您可能需要使用「操作」事件。

Answer 2

使用try.sencha.com它有很多關於如何使用框架的例子。 您需要使用Ajax存儲從服務器獲取數據。我認爲this指南將是一個好的開始，它也實現了樹木商店。

這個example解釋瞭如何根據您在搜索字段中鍵入的內容來過濾列表中的數據。

希望它可以幫助

Answer 3

在搜索欄，您可以在列表中使用鍵向上事件和過濾商店類型承租人匹配存儲並顯示過濾數據的列表，然後選擇在項目隱藏列表，波紋管做

{ 
    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 4

假設您已在商店中有數據。 下面是工作的代碼：

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