不能让Ext.ux.form.SearchField在ExtJS中工作

Can't get Ext.ux.form.SearchField to work in ExtJS

本文关键字：ExtJS 工作 SearchField form Ext ux 不能      更新时间：2023-09-26

我似乎不能让SearchField在extJS中工作。我想在表工具栏中实现它，并在我的表存储对象上执行过滤器。

我有我的要求设置如下:

Ext.require([
    'Ext.ux.form.SearchField'  
]);

我添加搜索字段到我的工具栏，像这样:

tbar: [
  new Ext.ux.form.SearchField({
       store: tablestore,
       width:320
  })
]

我的tablestore很普通。我将remoteFilter设置为false(我只想在本地发生)。

var tablestore = new Ext.data.SimpleStore({
    fields: [
        {name: 'id', type: 'int'},
        {name: 'name'}
    ],
    remoteFilter:false
});

当我点击过滤器按钮时，列表被清除。如果我删除过滤器，列表仍然清除。没有错误信息。

操纵:

https://fiddle.sencha.com/小提琴/6 h

(确保版本设置为4.2)

编辑:

这是另一个小提琴。在这个小提琴中，我使用搜索字段作为停靠项。它仍然有同样的问题:https://fiddle.sencha.com/小提琴/6 p4

如果您经常使用它，我建议您编写自己的搜索字段。正如您在代码中看到的，这是一个简单的扩展，它在代理中设置一个参数(默认名称为query)并重新加载存储。在您的情况下，它不工作，因为您使用SimpleStore(和SimpleStore.load()加载一个空的存储(即使它有一些记录))。

根据Andrei的建议，我最终编写了自己的搜索字段。

我向记录对象添加了一个名为'filterMeOut'的属性，然后在tableStore对象上使用filterBy应用了我自己的客户过滤器。

在我的docket items中的items数组中，我编写了以下代码

    }, 'Search', {
        xtype: 'textfield', enableKeyEvents: true, listeners: {
            keyup: function (string) {
                tablestore.clearFilter();
                var dataToDelete = [];
                //iterate and set flag
                tablestore.each(function(rec, idx){
                    contains = false;
                    for (field in rec.data) {
                        if (rec.data[field].indexOf(string.getValue()) > -1) { //field contains
                            contains = true;
                        }
                    }
                    if (!contains) {
                        rec.filterMeOut = false;
                    }else {
                        rec.filterMeOut = true;
                    }
                });
                //custom filter object
                tablestore.filterBy(function(rec, id) {
                    if(rec.filterMeOut) {
                        return true;
                    }
                    else {
                        return false;
                    }
                });
            }
        }
    }

非常适合我。

我可以做你想做的，但我使用这个小插件代替:

http://www.sencha.com/forum/showthread.php?70558-Ext.ux.grid.Search

它可能并不完美(没有SenchaCmd包，不容易更新)，但它可以完美地与网格过滤器一起工作，而不需要指定存储(它将使用Grid参数)

您必须将其添加为"Grid Plugin"，不幸的是要深入源代码才能找到有关配置的更多信息。

相关文章：