如何使用详细信息卡在列表中添加搜索？ （Sencha Touch 2）

Question

我是Sencha的新手，我是第一次申请。我需要将搜索列入清单。我查看了从Sencha下载的示例搜索，但无法弄清楚如何将其插入搜索列表中。很高兴获得任何暗示。 This is my app

Answer 1

我一开始努力让搜索字段在MVC风格的应用程序中运行。

我能够在你的sencha小提琴应用程序中使搜索字段工作。

在你的控制器里我做了

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

});

然后在app.js中我向视口添加了一个ID

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

我还在RecieptList.js

中添加了一个ID

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

可能不是最传统的解决方案，但它有效。 很容易看出它们如何一起工作，希望有所帮助。