Extjs Sencha Touch 2搜索列表

我在设计和获取搜索字段时遇到了问题，我不知道如何使其工作，我可以在Sencha Touch 2上看到任何文档或示例代码。任何帮助都将不胜感激。现阶段：

`Ext.define('ikhlas.view.SearchProfile', {
extend: 'Ext.Panel',
xtype: 'searchpanel',

    config:{
            title: 'Search',
                iconCls: 'search',
                scrollable: true,
                styleHtmlContent: true,

    items: [
        {
            xtype: 'fieldset',
                title:'Search Profile',
                iconCls:'add',

    items: [

            {

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

           ]    

        },

           ]

        }

});`

我的控制器看起来是这样的（没有完成任何操作，我不知道如何启动帮助）：

下面是我要自动搜索的数据列表：

data: [
            {firstName: 'Tommy',   lastName: 'Maintz'},
            {firstName: 'Rob',     lastName: 'Dougan'},
            {firstName: 'Ed',      lastName: 'Spencer'},
            {firstName: 'Jamie',   lastName: 'Avins'},
            {firstName: 'Aaron',   lastName: 'Conran'},
            {firstName: 'Dave',    lastName: 'Kaneda'},
            {firstName: 'Michael', lastName: 'Mullany'}

---

我希望搜索字段的工作方式是，当用户键入字符时，它会自动弹出建议，就像：

在您的控制器中，您应该侦听两个事件，clearicontap和keyup以查找搜索字段

...
control: {
    'searchfield': {
        keyup: 'onSearchQueryChanged',
        clearicontap: 'onSearchReset'
    }
},

onSearchQueryChanged: function(field) {
    // as in sample
    //get the store and the value of the field
        var value = field.getValue(),
            store = this.getStore(); //you should actually point to the real store

        //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('firstName').match(search) || record.get('lastName').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];
                }
            });
        }
},

onSearchReset: function(field) {
    this.getStore().clearFilter();
}

...

。。。
控制：{
“搜索字段”：{
keyup:'onSearchQueryChanged'，
clearicontap:“onSearchReset”
}
},
onSearchQueryChanged:函数（字段）{
//如样品中所示
//获取存储和字段的值
var value=field.getValue（），
store=this.getStore（）；//实际上应该指向真实的存储
//首先清除存储上的所有当前过滤器
store.clearFilter（）；
//检查是否先设置了一个值，就好像它不是我们不需要做任何事情一样
如果（值）{
//用户可能已经输入了空格，因此我们必须将其拆分，以便能够循环遍历所有空格
var搜索=value.split（“”），
regexps=[]，
我
//把它们都圈起来
对于（i=0；i1&&matched.indexOf（false）！=-1）{
返回false；
}否则{
//else true true（在商店中显示）
返回匹配的[0]；
}
});
}
},
onSearchReset:函数（字段）{
这个.getStore（）.clearFilter（）；
}
...

此示例将模拟与ST2 SDK中相同的行为，即过滤

Ext.List

的存储。当然，您可能最终会实现自己的过滤逻辑

---

请注意，

searchfield

只不过是一个样式化的

textfield

，通常右边有clear按钮（取决于浏览器/os），如HTML5中所定义。

由于您使用的是同一个示例，您可以查看他们自己的文档代码以获取此示例（随sdk提供）…感谢GRGr的帮助，当我尝试搜索这些值时，如何设置存储以便检索这些值？谢谢{姓：汤米，'姓：美因茨'}，{姓：罗布，'姓：道格'}，{姓：埃德，'姓：斯宾塞'}，{姓：杰米，'姓：阿文斯'}，{姓：亚伦，'姓：康兰'}，{姓：戴夫，'卡内达'}，{姓：“迈克尔”，姓：“穆拉尼”}`如果您在服务器上进行筛选，则只需发送正确的筛选器。否则，请等待存储加载，对其使用“加载”事件，并在完成后发送筛选回调，以便在数据准备就绪时进行筛选。Hi-Grgur，我设法实现了这样的目标。请参阅这一行并从那里帮助我。谢谢。

...
control: {
    'searchfield': {
        keyup: 'onSearchQueryChanged',
        clearicontap: 'onSearchReset'
    }
},

onSearchQueryChanged: function(field) {
    // as in sample
    //get the store and the value of the field
        var value = field.getValue(),
            store = this.getStore(); //you should actually point to the real store

        //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('firstName').match(search) || record.get('lastName').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];
                }
            });
        }
},

onSearchReset: function(field) {
    this.getStore().clearFilter();
}

...