Sencha touch 2 如何添加带有详细信息卡的搜索列表？（Sencha Touch 2）

我是新来森查的，我第一次申请。我需要把搜索放在列表中。我查看了从Sencha下载的示例搜索，但不知道如何将其插入搜索列表中。我很乐意得到任何提示。

---

起初，我很难让搜索字段在MVC风格的应用程序中正常工作

我可以在你的sencha fiddle应用程序中使用这样的搜索字段

在你的控制器里我做到了

Ext.define('Sencha.controller.Main', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {
            main: 'mainpanel'
        },
        control: {
            '#list': {
                disclose: 'showDetail'
            },
            '#view':{
                activate:function(){
                    Ext.getCmp('list').add({
                        xtype:'toolbar',
                        docked:'top',
                        items:[{
                            xtype: 'searchfield',
                            itemId:'contact_search',
                            placeHolder: 'Search....',
                            listeners: {
                                scope: this,
                                clearicontap: this.onSearchClearIconTap,
                                keyup: this.onSearchKeyUp}
                        }]
                    })
                        }
            }
        }
    },

    showDetail: function(list, record) {
        this.getMain().push({
            xtype: 'recipedetail',
            title: record.fullName(),
            data: record.data
        })
            },  onSearchKeyUp: function(field) {
                //get the store and the value of the field
                var value = field.getValue(),
                    store = Ext.getCmp('list').getStore();

                //first clear any current filters on thes tore
                store.clearFilter();

                //check if a value is set first, as if it isnt we dont have to do anything
                if (value) {
                    //the user could have entered spaces, so we must split them so we can loop through them all
                    var searches = value.split(' '),
                        regexps = [],
                        i;

                    //loop them all
                    for (i = 0; i < searches.length; i++) {
                        //if it is nothing, continue
                        if (!searches[i]) continue;

                        //if found, create a new regular expression which is case insenstive
                        regexps.push(new RegExp(searches[i], 'i'));
                    }

                    //now filter the store by passing a method
                    //the passed method will be called for each record in the store
                    store.filter(function(record) {
                        var matched = [];

                        //loop through each of the regular expressions
                        for (i = 0; i < regexps.length; i++) {
                            var search = regexps[i],
                                didMatch = record.get('title').match(search);

                            //if it matched the first or last name, push it into the matches array
                            matched.push(didMatch);
                        }

                        //if nothing was found, return false (dont so in the store)
                        if (regexps.length > 1 && matched.indexOf(false) != -1) {
                            return false;
                        } else {
                            //else true true (show in the store)
                            return matched[0];
                        }
                    });
                }
            },

    /**
* Called when the user taps on the clear icon in the search field.
* It simply removes the filter form the store
*/
    onSearchClearIconTap: function() {
        //call the clearFilter method on the store instance
        this.getStore().clearFilter();
    }

});

我还向receiptlist.js添加了一个ID

    xtype: 'recipelist',
    requires: ['Sencha.store.Recipes'],
    id:'list',
    config: {

可能不是最传统的解决方案，但它确实有效。

---

很容易看出它们是如何协同工作的，希望能有所帮助。

非常感谢您的回复！这对我很有帮助！我已应用了您的更改，但应用程序不起作用。也许我会错过什么？您应该始终在Chrome中打开控制台。你的app.js中有一个输入错误。我把多余的注释掉了。它现在运行。另外，在本地运行时，我必须将json文件移动到根目录。顺便说一句，别忘了接受和投票fuzzyLikeSheep的答案。当我在本地运行时，搜索结果不会显示，甚至我将json文件移动到了根目录中。这可能是因为我通过php文件将文件从数据库上传到列表？有两种不同的Sencha fiddle。我只在克希普的回答中看到。出于某种原因，他正在添加带有激活事件的搜索字段。也许不是为你开枪？您可以在没有PHP测试的情况下运行代码。另外，我正在使用Chrome。在app.js中，id为“view”的行很重要。当然，我尝试在没有php的情况下运行代码，我也使用Chrome，在控制台中没有消息。关于激活事件，也许你是对的，但很难找到原因。无论如何，非常感谢你的帮助！

    xtype: 'recipelist',
    requires: ['Sencha.store.Recipes'],
    id:'list',
    config: {