Question

我使用Ext.ux.LiveSearchGridPanel并且我想要隐藏所有没有匹配的行。

当搜索字段为空时，我希望显示所有元素。

我正在使用包含我的数据的Ext.data.Store。

我试图为此找到配置，但没有运气。

Answer 1

您可以按此值处理搜索字段和过滤器存储。像这样：

Ext.create('Ext.ux.LiveSearchGridPanel', {

    ...

    listeners: {
        afterrender: function() {
            var me = this,
                store = me.getStore();

            me.textField.on('change', function(cmp) {
                var searchValue = cmp.getValue();

                store.clearFilter(true);

                if (!searchValue) {
                    return;
                }

                store.filter(function(record) {
                    // you can filter store by some column
                    var companyName = record.get('company'); 

                    if (!me.caseSensitive) {
                        companyName = companyName.toLowerCase();
                        searchValue = searchValue.toLowerCase();
                    }

                    if (me.regExpMode) {
                        var match = companyName.match(searchValue);

                        return match ? this.indexOf(match[0]) : -1;
                    }

                    return companyName.indexOf(searchValue) != -1;
                });
            })
        }
    }
});

<强> Look my fiddle example

Ext.ux.LiveSearchGridPanel隐藏不匹配的行

1 个答案: