Sencha touch Sencah Touch 2搜索列表中需要帮助

在建立sencha搜索列表时，我很难获得我想要的确切结果，我只建立了一个列表，但我想要的实际结果是这样的。我已经按照示例建立了类似的结果，但我的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文件

外部应用程序({ 名称：'列表'

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

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

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

}))

很抱歉，我必须在这里发布我的整个应用程序，我只是想让我的qestion尽可能详细。目前，我当前的应用程序显示为此，但搜索字段不起作用。我需要帮助，谢谢

我真的需要帮助。我希望得到的结果是这样的，一旦用户要搜索字段，从R开始存储的名称列表将全部显示：

---

谢谢您的帮助。

您实际上需要监听搜索字段上的修改，并根据值筛选存储

这是您需要对控制器进行的修改类型：

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

---

此外，我还将向模型中添加另一个字段，该字段结合了名字和姓氏（例如全名），并对其进行搜索

嗨，格格，我还在等你把我的名字和姓氏加起来。请帮助我，谢谢模型：字段：['firstName'，'middleInitial'，'lastName'，{name:'fullName'，mapping:'firstName'，convert:function（value，rec）{return value+''+rec.get（'lastName'）；}}}]以下是Sencha Touch文档中演示的搜索列表代码，希望对您有所帮助