javascript - Sencha Touch 商店过滤器按功能

Question

您好，我正在尝试使用 store filterBy 函数，但我无法使其按我想要的方式工作。我有四个按钮(A B C D)和一个包含与按钮相关的所有数据的列表当我单击按钮时，我应该进行相应的过滤注意:-当我点击 A 时，我应该得到 A 的记录 当我点击 B 时，我应该将 B 的记录附加到 A 的记录列表所以实际上当我点击按钮时我应该有一个按钮 id 数组并使用这些 id 过滤列表。

  filterList:function (list, index, target, record){
    var categories=[];
    categories.push(record.get('id'));
                                for(c=0;c<categories.length;c++)
                                {
                                Ext.getStore('mystore').filterBy(function(record){
                                  var id = record.get('id');
                                       if(id==categories[c])
                                        {       
                                            return true; 
                                        }

                                });
                                }

    }

感谢任何帮助。

Answer 1

你的代码有什么问题

filterBy 返回函数应始终返回一个 bool 值。您仅返回 true，而不返回 false。除此之外，您正在循环中过滤store，并且参数record存在两次(作为函数filterList中的参数，在filterBy的返回函数中)。

示例

我创建了一个Fiddle向你展示我的想法。我知道它是 ExtJs 而不是 Sencha Touch，但您会明白的。我将逐步了解所有逻辑所在的 MainController。

我没有清理代码，因此存在一些重复，但这只是一个概念。

设置一些逻辑

首先，我在 View 上创建一组按钮。请注意，我正在设置操作属性。

...
tbar: [{
    text: 'Filter a',
    action: 'a'
}, {
    text: 'Filter b',
    action: 'b'
}],
...

然后我将一个 onClick 事件绑定(bind)到该按钮。在这种情况下，我使用操作属性作为 searchValue，但它当然可以是任何东西。

...
onClick: function(button, event, eOpts) {
    var me = this,
        grid = me.getMainGrid(),
        store = grid.getStore(),
        filters = store.getFilters(),
        searchValue = button.action,
        regex = RegExp(searchValue, 'i'),
        filter = new Ext.util.Filter({
            id: button.id,
            filterFn: function(record) {
                var match = false;
                Ext.Object.each(record.data, function(property, value) {
                    match = match || regex.test(String(value));
                });
                return match;
            }
        });

    if (filters.containsKey(button.id)) {
        store.removeFilter(filter);
    } else {
        store.addFilter(filter);
    }
},
...

魔法

神奇之处在于过滤器实例。通过在每次过滤时添加新过滤器实例，您可以使用多个过滤器进行过滤。如果您按下按钮 a 和按钮 b，它们将相互尊重。在该过滤器中，我使用正则表达式来搜索当前模型的所有数据。我配置了一个 id 来识别过滤器，以便随后将其删除。

filter = new Ext.util.Filter({
    id: button.id,
    filterFn: function(record) {
        var match = false;
        Ext.Object.each(record.data, function(property, value) {
            match = match || regex.test(String(value));
        });
        return match;
    }
});

如果过滤器不存在，则会添加该过滤器，否则会删除该过滤器。

if (filters.containsKey(button.id)) {
    store.removeFilter(filter);
} else {
    store.addFilter(filter);
}

重置过滤器

我还创建了一个文本字段来搜索所有数据。我只需调用 clearFilter 并使用新的 searchvalue 添加新的 filter，而不是添加和删除 filter。

onKeyUp: function(textField, event, eOpts) {
    this.filterStore(textField.getValue());
},

filterStore: function(searchValue) {
    var me = this,
        grid = me.getMainGrid(),
        store = grid.getStore(),
        regex = RegExp(searchValue, 'i');

    store.clearFilter(true);

    store.filter(new Ext.util.Filter({
        filterFn: function(record) {
            var match = false;
            Ext.Object.each(record.data, function(property, value) {
                match = match || regex.test(String(value));
            });
            return match;
        }
    }));
}

完整的主 Controller

Ext.define('Filtering.controller.MainController', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {
            mainGrid: 'maingrid'
        }
    },

    init: function() {
        var me = this;

        me.listen({
            global: {},
            controller: {},
            component: {
                'segmentedbutton': {
                    toggle: 'onToggle'
                },
                'toolbar > button': {
                    click: 'onClick'
                },
                'textfield': {
                    keyup: 'onKeyUp'
                }
            },
            store: {
                '*': {
                    metachange: 'onMetaChange',
                    filterchange: 'onFilterChange'
                }
            },
            direct: {}
        });
    },

    onLaunch: function() {
        var store = Ext.StoreManager.lookup('Users') || Ext.getStore('Users');

        store.load();
    },

    onMetaChange: function(store, metaData) {
        var grid = this.getMainGrid(),
            model = store.getModel(),
            // metadata
            fields = metaData.fields,
            columns = metaData.columns,
            gridTitle = metaData.gridTitle;

        model.fields = fields;
        grid.setTitle(gridTitle);
        grid.reconfigure(store, columns);
    },

    onFilterChange: function(store, filters, eOpts) {
        var me = this,
            grid = me.getMainGrid();

        grid.getSelectionModel().select(0);
    },

    /**
     * Used for the segmented buttons
     */
    onToggle: function(container, button, pressed) {
        var me = this,
            grid = me.getMainGrid(),
            store = grid.getStore(),
            //filters = store.getFilters(),
            searchValue = button.action,
            regex = RegExp(searchValue, 'i'),
            filter = new Ext.util.Filter({
                id: button.id,
                filterFn: function(record) {
                    var match = false;
                    Ext.Object.each(record.data, function(property, value) {
                        match = match || regex.test(String(value));
                    });
                    return match;
                }
            });

        if (pressed) {
            store.addFilter(filter);
        } else {
            store.removeFilter(filter);
        }
    },

    /**
     * Used for the toolbar buttons
     */
    onClick: function(button, event, eOpts) {
        var me = this,
            grid = me.getMainGrid(),
            store = grid.getStore(),
            filters = store.getFilters(),
            searchValue = button.action,
            regex = RegExp(searchValue, 'i'),
            filter = new Ext.util.Filter({
                id: button.id,
                filterFn: function(record) {
                    var match = false;
                    Ext.Object.each(record.data, function(property, value) {
                        match = match || regex.test(String(value));
                    });
                    return match;
                }
            });

        if (filters.containsKey(button.id)) {
            store.removeFilter(filter);
        } else {
            store.addFilter(filter);
        }
    },

    /**
     * Used for the textfield
     */
    onKeyUp: function(textField, event, eOpts) {
        this.filterStore(textField.getValue());
    },

    filterStore: function(searchValue) {
        var me = this,
            grid = me.getMainGrid(),
            store = grid.getStore(),
            regex = RegExp(searchValue, 'i');

        store.clearFilter(true);

        store.filter(new Ext.util.Filter({
            filterFn: function(record) {
                var match = false;
                Ext.Object.each(record.data, function(property, value) {
                    match = match || regex.test(String(value));
                });
                return match;
            }
        }));
    }
});

完整 View

Ext.define('Filtering.view.MainGrid', {
    extend: 'Ext.grid.Panel',
    xtype: 'maingrid',

    tbar: [{
        xtype: 'segmentedbutton',
        allowMultiple: true,
        items: [{
            text: 'Filter a',
            action: 'a'
        }, {
            text: 'Filter b',
            action: 'b'
        }]
    }, {
        text: 'Filter a',
        action: 'a'
    }, {
        text: 'Filter b',
        action: 'b'
    }, {
        xtype: 'textfield',
        emptyText: 'Search',
        enableKeyEvents: true
    }],
    //title: 'Users', // Title is set through the metadata
    //store: 'Users', // we reconfigure the store in the metachange event of the store
    columns: [] // columns are set through the metadata of the store (but we must set an empty array to avoid problems)
});