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

你的代码有什么问题

filterByreturn函数应该总是return一个boolean value。您只 returning true，没有 false。另外你是filtering一个loop中的store，参数record存在两次（as函数 filterList 中的一个参数 and 在 filterBy 的 return 函数中。

例子

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

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

设置一些逻辑

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

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

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

...
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 搜索当前 model 的所有 data。我配置了一个 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 商店过滤器按功能

Sencha Touch store filterBy function

javascript

extjs

sencha-touch

sencha-touch-2

store

你的代码有什么问题

例子

设置一些逻辑

魔法

重置过滤器

完整的主控制器

完整视图