2

データビューに関して検索フィールドを配置しようとしています。データビューの上部には、テキストフィールドで構成されるツールバーがあります。フィールドにテキストを入力したら、検索機能を呼び出します。今のところ、私はリスナーをテキストフィールドにつかんでいますが、ユーザーがテキストフィールドに何かを入力し始めた直後にリスナーが呼び出されます。

しかし、ユーザーがテキストフィールドに少なくとも3文字を入力した場合にのみ検索機能を開始しようとしていますが、どうすればよいですか？

以下のコード

意見

var DownloadsPanel = {
            xtype : 'panel',
            border : false,
            title : LANG.BTDOWNLOADS,
            items : [{

                xtype : 'toolbar',
                border : true,
                baseCls : 'subMenu',
                cls : 'effect1',
                dock : 'top',
                height : 25,
                items : [{
                    xtype : 'textfield',
                    name : 'SearchDownload',
                    itemId : 'SearchDownload',
                    enableKeyEvents : true,
                    fieldLabel : LANG.DOWNLOADSF3,
                    allowBlank : true,
                    minLength : 3
                }],
{

                xtype : 'dataview',
                border : false,
                cls : 'catalogue',
                autoScroll : true,
                emptyText : 'No links to display',
                selModel : {
                    deselectOnContainerClick : false
                },
                store : DownloadsStore,
                overItemCls : 'courseView-over',
                itemSelector : 'div.x-item',
                tpl : DownloadsTpl,
                id : 'cataloguedownloads'

            }]

コントローラ：

init : function() {

        this.control({
             // reference to the text field in the view
                 '#SearchDownload' :{
                    change: this.SearchDownloads

            }
});

SearchDownloads : function(){
            console.log('Search functionality')

        }

更新1：次のコードを使用して3文字を入力した後、リスナーを取得できました。

コントローラ

    '#SearchDownload' :{
                     keyup : this.handleonChange,       
            },

         handleonChange : function(textfield, e, eOpts){

            if(textfield.getValue().length > 3){

                console.log('Three');
            }
    }

データビューのストアで検索を実行する方法に関するガイダンスまたは例をいただければ幸いです。

4

3 に答える 3

3

適切な方法は、フィールドの変更イベントにサブスクライブし、続行する前に新しい値に少なくとも3文字があるかどうかを確認することです。

'#SearchDownload' :{ change: this.handleonChange }
// othoer code
handleonChange : function(textfield, newValue, oldValue, eOpts ){
      if(newValue.length >= 3){
            console.log('Three');
      }
}

ところで。IDには小文字と「-」で区切られた名前を使用することをお勧めします。あなたの場合

itemId : 'search-download'

編集 フィルターを適用します

フィルタを適用するには、フィルタを使用します。これで、フィルタリングするフィールドがわかりますか？storeを置き換えることができるよりも、コントローラー内の変数であるふりをconsole.log()しましょう

this.store.filter('YourFieldName', newValue);

2番目のパラメーターは、例のように値を使用して正規表現にすることもできます

this.store.filter('YourFieldName', new RegExp("/\"+newValue+"$/") );

確かにあなたは関数を使うこともできます

this.store.filter({filterFn: function(rec) { return rec.get("YourFieldName") > 10; }});
于 2012-11-26T12:17:12.500 に答える
0

私はあなたが達成しようとしていることの正確な例があると思います..http ：//docs.sencha.com/ext-js/4-0/# ！/ example / form / forum-search.html

于 2012-12-02T12:52:51.990 に答える