无法使Ext.ux.form.SearchField在ExtJS中工作

Question

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

我有这样的要求设置：

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

我将搜索字段添加到我的工具栏中，如下所示：

tbar: [

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

我的表存储很普通。 我将remoteFilter设置为false（我只希望这在本地发生）。

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

当我单击过滤器按钮时，该列表将被清除。 如果删除筛选器，列表将保持清除状态。.没有错误信息。

小提琴：

https://fiddle.sencha.com/#fiddle/6hs

（确保您将版本设置为4.2）

编辑：

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

Answer 1

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

Answer 2

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

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

在我的资料夹项目的项目数组中，我编写了此代码

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

非常适合我。

Answer 3

我能够做您尝试做的事情，但是我改用了这个小插件：

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

它可能不是完美的（没有SenchaCmd软件包，不容易更新），但它可以与Grid过滤器完美配合，而无需指定存储（它将使用Grid参数）

您必须将其添加为“网格插件”，不幸的是深入源代码以找到有关配置的更多信息。