Question

我试图针对数据视图设置搜索字段。数据视图顶部有一个工具栏，其中包含一个文本字段。在字段中输入一些文本时，我想调用搜索功能。截至目前，我已经掌握了文本字段的监听器，但是在用户开始在文本字段中键入内容后立即调用监听器。

但是，我想要做的只是当用户在文本字段中输入至少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');
            }
    }

任何有关如何在数据视图存储中执行搜索的指导或示例都将不胜感激。

Answer 1

正确的方法是订阅该字段的 change 事件，并在继续之前检查新值是否至少有3个字符。

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

顺便说一下。我建议你为id使用小写和' - '分隔的名字。在你的情况下

itemId : 'search-download'

修改 应用过滤器

要应用过滤器，我会使用 filter 我想您现在想要过滤的字段？假设store是控制器中的变量，而不是用{/ 1>替换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; }});

Answer 2

非常感谢你的回答。以下是我根据您的意见所做的事情

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;
            })




        }

    }

Answer 3

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

extjs中数据视图中的搜索字段

3 个答案: