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

Posted 2023-03-30

【中文标题】无法让 Ext.ux.form.SearchField 在 ExtJS 中工作

【英文标题】：Can't get Ext.ux.form.SearchField to work in ExtJS

【发布时间】：2014-06-10 15:54:51

【问题描述】：

我似乎无法让 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/#fiddle/6hs

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

编辑：

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

【问题讨论】：

请问您是在哪里找到这个 SearchField 的？我在 ExtJS 文档中找不到它。

它是 ExtJS 中的标准搜索字段，不是吗？还是应该使用其他一些搜索/过滤字段。

@AurélienThieriot 它位于 api 的“ux”部分 - 它是与框架捆绑在一起的扩展。

【参考方案1】：

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

【参考方案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;
                    
                );
            
        
    

非常适合我。

【讨论】：

虽然我确实有渲染值的问题:(

【参考方案3】：

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

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

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

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

【讨论】：

我在 us.grid 目录中找不到这个。你的意思是我必须自己下载并添加到目录中？

是的。这很痛苦，所以如果你不想这样做，我会理解的。但我让它工作了，所以我想这是一个改进：/