無法使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參數）

您必須將其添加為“網格插件”，不幸的是深入源代碼以找到有關配置的更多信息。