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

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

Answer 2

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

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

在我的docket项目中的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;
                    }
                });
            }
        }
    }

完美适合我。

Answer 3

我能够做你想做的事，但我使用了这个小插件：

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

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

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

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

3 个答案: