在Sencah Touch中需要幫助2搜索列表

Question

我在創建sencha搜索列表時遇到了問題，但我設法構建了一個列表，但我想要的實際結果就像這樣http://docs.sencha.com/touch/2-0/#!/example/search-list我跟隨了例如建立類似的東西，但我的serach不工作，希望有人能給我一個關於如何實現這一點的詳細答案。下面是我的代碼從我的控制器到最後一個。

這是我的控制器 Ext.define（ 'List.controller.Main'，{ 延伸： 'Ext.app.Controller'，

config: { 
    refs: { 
     main: 'mainpanel' 
    }, 
    control: { 
     'presidentlist': { 
      disclose: 'showDetail' 
     } 
    } 
}, 

showDetail: function(list, record) { 
    this.getMain().push({ 
     xtype: 'presidentdetail', 
     title: record.fullName(), 
     data: record.getData() 
    }) 
} 

}）; 這是我的模型

Ext.define('List.model.President', { 
extend: 'Ext.data.Model', 
config: { 
    fields: ['firstName', 'middleInitial', 'lastName'] 
}, 

fullName: function() { 
    var d = this.data, 
    names = [ 
     d.firstName, 
     (!d.middleInitial ? "" : d.middleInitial + "."), 
     d.lastName 
    ]; 
    return names.join(" "); 
} 

}）;

這是我的商店

Ext.define('List.store.Presidents', { 
extend: 'Ext.data.Store', 

config: { 
    model: 'List.model.President', 
    sorters: 'lastName', 
    grouper : function(record) { 
     return record.get('lastName')[0]; 
    }, 
    data: [ 
     { firstName: "George", lastName: "Washington" }, 
     { firstName: "John", lastName: "Adams" }, 
     { firstName: "Thomas", lastName: "Jefferson" }, 
     { firstName: "James", lastName: "Madison" }, 


    ] 
} 

}）; 這是我的意見，在我的視圖文件夾，

Ext.define('List.view.Main', { 
extend: 'Ext.navigation.View', 
xtype: 'mainpanel', 
requires: [ 
    'List.view.PresidentList', 
    'List.view.PresidentDetail' 
], 

config: { 
    items: [{ 
     xtype: 'presidentlist' 
    }] 
} 

}）;

仍在我的視圖文件夾PresidentDetail

Ext.define('List.view.PresidentDetail', { 
extend: 'Ext.Panel', 
xtype: 'presidentdetail', 

config: { 
    title: 'Details', 
    styleHtmlContent: true, 
    scrollable: 'vertical', 
    tpl: [ 
     'Why Not Work {firstName} {lastName}!' 
    ] 
} 

}）;

仍在我的視圖文件夾我有一個名爲PresidentList

另一個文件

Ext.define('List.view.PresidentList', { 
extend: 'Ext.List', 
xtype: 'presidentlist', 
requires: ['List.store.Presidents'], 

config: { 
    xtype:'container', 
    title: 'Why Not Work', 
    grouped: true, 
    itemTpl: '{firstName} {lastName}', 
    styleHtmlContent: true, 
    store: 'Presidents', 
    onItemDisclosure: true, 

    items: [ 

      { 

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

     { 

      xtype: 'spacer', 
       height: 25 
      }, 
      ] 
} 

}）;

這是我App.js文件

Ext.application（{ 名稱： '名單'，

requires: [ 
    'Ext.field.Search' 
], 

controllers: ['Main'], 
views: ['Main'], 
stores: ['Presidents'], 
models: ['President'], 

launch: function() { 
    Ext.Viewport.add({ 
     xtype: 'mainpanel' 
    }); 
} 

}）;

對不起，我必須在這裏發佈我的整個應用程序，我只是儘量讓我的問題儘可能詳細。此刻，我目前的應用程序顯示爲這樣，但搜索字段不起作用。我需要幫助，請感謝

我認真地需要幫助，請。我希望實現的結果是這樣的，以便一旦用戶即將搜索該字段，從R開始存儲的名稱列表將全部顯示出來：

感謝您的幫助。

Answer 1

您實際上需要偵聽搜索字段上的修改並根據該值篩選商店。

這是你需要對你的控制器的一種修改：

config: { 
    refs: { 
     main: 'mainpanel' 
    }, 
    control: { 
     'presidentlist': { 
      disclose: 'showDetail' 
     }, 

     'searchfield': { 
      keyup: 'doSearch' 
     } 
    } 
}, 

showDetail: function(list, record) { 
    this.getMain().push({ 
     xtype: 'presidentdetail', 
     title: record.fullName(), 
     data: record.getData() 
    }) 
}, 

doSearch: function(field) { 
    var value = field.getValue(), 
     store = this.getPresidentList().getStore(), 
     query = new RegExp(value, 'i'); 

    store.filter('firstName', query) 
} 

另外，我想其他字段添加到結合​​了第一個和最後的名字（例如全名）的模型和搜索反對。