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：使用以下代码输入三个字符后，我能够抓住听众：

控制器

    '#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);

第二个参数也可以是使用示例中的值的正则表达式

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

当然你也可以使用函数

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

非常感谢您的回答。根据您的评论，这是我所做的

filterDownloads : function(val, filterWh){

        if(filterWh == 1){
            var store = Ext.getStore('CatalogueDownloads');
            store.clearFilter();
            store.filterBy(function (r){
                var retval = false;
                var rv = r.get('title');
                var re = new RegExp((val), 'gi');
                retval = re.test(rv);

                if(!retval){
                    var rv = r.get('shortD');
                    var re = new RegExp((val), 'gi');
                    retval = re.test(rv);
                }

                if(retval){
                    return true;
                }

                return retval;
            })




        }

    }
于 2012-11-26T14:22:03.670 回答
0

我认为有一个你想要达到的目标的例子.. http://docs.sencha.com/ext-js/4-0/#!/example/form/forum-search.html

于 2012-12-02T12:52:51.990 回答