1

在设计和让搜索字段工作时遇到问题，我不知道如何让这个工作，我可以在 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',
            },

           ]    

        },

           ]

        }

});`

我的控制器看起来像这样（注意已经完成，我不知道如何开始帮助）：

Ext.define('ikhlas.controller.SearchField',{
extend: 'Ext.app.Controller',

config:{
    refs:{
        submitpanel:'loginpanel'
    },

control:{

    }
},

  });

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

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

我希望搜索字段的工作方式是当用户输入字符时，它会自动弹出建议，就像：http ://docs.sencha.com/touch/2-0/#!/example/search -列表

4

1 回答 1

3

在您的控制器中，您应该监听两个事件，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();
}

...

此示例将模拟与 ST2 SDK 中相同的行为，即过滤Ext.List. 自然，您最终可能会实现自己的过滤逻辑。

请注意，这searchfield只不过是一个样式化的textfield，通常在右侧带有清晰的按钮（取决于浏览器/操作系统），如 HTML5 中所定义。

于 2012-05-11T05:51:56.307 回答