Question

您好我正在尝试使用商店filterBy函数，但我无法让它按我的意愿工作。我有四个按钮（A B C D）和一个包含与按钮相关的所有数据的列表当我点击按钮时，我应该相应地过滤 注意： - 当我点击A时，我应该得到A的记录当我点击B时，我应该将A的记录附加到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返回功能应始终返回boolean value。您只返回true，而不是false。除此之外，filtering中store为loop，参数record存在两次（作为函数中的参数filterBy 的返回函数中的filterList 和。

实施例

我创建了一个Fiddle来向您展示我想出的位置。我知道它是ExtJs而不是Sencha Touch，但您会明白这一点。我将逐步完成所有逻辑的MainController。

我没有清理代码，所以有一些重复，但它只是一个概念。

设置一些逻辑

首先，我在view上创建了一组按钮。看到我设置action property。

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

然后我将onClick事件绑定到按钮。在这种情况下，我使用action属性作为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);
    }
},
...

神奇

魔法在filter instance。每次过滤时添加new filter instances，您都可以使用多个过滤器进行过滤。如果您按button a和button b，他们会互相尊重。在该过滤条件中，我使用regex搜索当前data的所有model。我配置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);
}

重置过滤器

我还创建了一个textfield来搜索所有数据。我没有添加和删除filters，而只是致电clearFilter并添加新的filter新searchvalue。

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;
        }
    }));
}

完整的主控制器

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;
            }
        }));
    }
});

完整视图

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)
});

Answer 2

假设您有两个切换按钮，并且您希望在切换这些按钮时过滤存储，

控制器

 Ext.define('namespace',{
    extend:'controller...',
    config:{
       refs:{
           btnA:'#btnA',
           btnB:'#btnB',
       },
       controls:{
          btnA:{
             change:'btnChange'
          },
          btnB:{
             change:'btnChange'
          }
      }
    },
    btnChange:function(ths,val){
       var btnA = this.getBtnA().getValue(),
           btnB = this.getBtnB().getValue();

       Ext.getStore('mystore').filterBy(function(r){
           if(btnA && btnB){
               return r.get('id') === btnA.getValue() || r.get('id') === btnB.getValue();
           }else if(btnA){
              return r.get('id') === btnA.getValue();
           }else if(btnB){
              return r.get('id') === btnB.getValue();
           }

           return false;
       });
    }
 });

Sencha Touch存储filterBy功能

2 个答案:

您的代码有什么问题

实施例

设置一些逻辑

神奇

重置过滤器

完整的主控制器

完整视图