1

検索フィールドの設計と動作に問題があります。これを動作させる方法がわかりません。SenchaTouch2でドキュメントやサンプルコードを確認できます。ヘルプをいただければ幸いです。これは私の現在の段階です：

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

           ]    

        },

           ]

        }

});`

そして、私のコントローラーは次のようになります（注意が払われました、ヘルプplsを開始する方法がわかりません）：

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の2つのイベントをリッスンする必要があります。

...
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。当然、フィルタリングのために独自のロジックを実装することになります。

HTML5で定義されてsearchfieldいるtextfieldように、通常は右側にクリアボタンがあります（ブラウザ/ OSによって異なります）。

于 2012-05-11T05:51:56.307 に答える