(4.1) Should store.add respect filters?

**colin.yates** · 29 Jun 2012 5:54 AM

Hi,

I have a memory store which an asynchronous ajax call occasionally adds records to. This store can be configured at run-time with filters and sorts and is backing a grid.

The problem is that if I add a record (store.add(..)) which doesn't match the current filter it is still displayed on the grid. Calling store.filter() hides it, but it also unfortunately resets any groupings (expanded/collapsed) and scroll co-ordinates.

It if helps, imagine I am building a grid which display server side log messages. It is updated every N seconds by an Ajax call which manually updates the store. The GUI allows you to filter messages though - maybe you only want to see SEVERE messages for example.

So my question is, how can I add a record to a (memory) store which is backed by a grid with filters so the grid only shows that item if it matches the current filter without losing the scroll and group state?

Thanks!

**colin.yates** · 29 Jun 2012 6:23 AM

Trawling through the forums again I found: http://www.sencha.com/forum/showthre...-EXTJS-4/page3 which links to http://docs.sencha.com/ext-js/4-1/#%...crollOnRefresh, which seems to work a treat!

Now to find a corresponding "preserveGroupsOnRefresh"...

**colin.yates** · 29 Jun 2012 1:28 PM

More context - this is only a problem if the group plugin is configured "startCollapsed:true" (which isn't the default)

**jsakalos** · 30 Jun 2012 10:46 AM

Is it solved or you need some assistance?

**colin.yates** · 1 Jul 2012 7:06 AM

My query still stands - when calling store.add() on a grid's store, should a record appear on the grid if it doesn't match the filter? My experiments indicate that the record does still appear until store.filter is called.

To be clear, I have a memory backed store, and a grid with a simple filter of "departmentId"=5. If I add a record {name:'hi-ho',departmentId:10} then it will appear on that grid until I call store.filter(). Is that expected behaviour?

**colin.yates** · 1 Jul 2012 7:34 AM

The story continues

.

I have found that if I have a record which *does* match a filter and then I update it so that it no longer matches the filter it is still (incorrectly) displayed in the grid, even after a store.filter(). Adding a new record does the right thing, so instead of updating it I remove and re-add it:

Code:

            var existingRecord = store.getById(newRecord.id);
            if (existingRecord != null) {
                /*
                Editing the record updates it and the subsequent store.filter() removes it from view if necessary,
                however, *new* records which should be in the filter aren't added.


                To work around this, delete the existing record and re-add it.
                 */
//                existingRecord.beginEdit();
//                var fields = existingRecord.fields;
//                for (var i = 0; i < fields.length; i++) {
//                    var key = fields.get(i).name;
//                    var newValue = newRecord.get(key);
//                    existingRecord.set(key, newValue);
//                }
//                existingRecord.endEdit();
                store.remove(existingRecord);
                records.push(newRecord);
             } else {
                records.push(newRecord);                
             }
..
..
             store.add(records);
             store.filter();

Removing and re-adding is unfortunate as it loses row-selection and isn't "the right thing to do", but I can live with it.

Should I create a small demo and post as a bug report? I am hesitant as almost certainly the bug is in my code or understanding ....

**jsakalos** · 1 Jul 2012 10:33 AM

I think that this is a bug as adding an non matching record to the store should filter it automatically. In the following showcase, when you click 'Re-filter' button the simple store.filter() is called that hides the such records. As a workaround you can install add listener and just call the filter after add.

HTML Code:

<!DOCTYPE html>
<!-- store-add-filtered.html -->
<html>
<head>
    <title>Example by Saki</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="ext-4.1.1/resources/css/ext-all.css" type="text/css">
    <link rel="shortcut icon" type="image/png" href="../Icon.png">
    <script type="text/javascript" src="ext-4.1.1/ext-all-dev.js"></script>
    <script type="text/javascript">

        Ext.define('My.grid.Grid', {
             extend:'Ext.grid.Panel'
            ,alias:'widget.inlinegrid'
            ,dockedItems:[{
                 xtype:'toolbar'
                ,dock:'top'
                ,items:[{
                     text:'Add Joe'
                    ,action:'add'
                },{
                     text:'Add John'
                    ,action:'add'
                },{
                     text:'Re-filter'
                    ,handler:function(btn) {
                        var store = btn.up('grid').getStore();
                        store.filter();
                    }
                }]
            }]
            ,store:{
                 fields:[
                     {name:'id', type:'int'}
                    ,{name:'firstName', type:'string'}
                    ,{name:'lastName', type:'string'}
                 ]
                ,filters:[{
                     property:'firstName'
                    ,value:'John'
                }]
                ,data:[
                     {id:1, firstName:'John', lastName:'Doe'}
                    ,{id:2, firstName:'John', lastName:'Rambo'}
                    ,{id:3, firstName:'John', lastName:'Smith'}
                    ,{id:4, firstName:'Joe', lastName:'Brown'}
                    ,{id:5, firstName:'John', lastName:'Locksmith'}
                    ,{id:6, firstName:'Joe', lastName:'White'}
                    ,{id:7, firstName:'John', lastName:'Black'}
                    ,{id:8, firstName:'Joe', lastName:'Gull'}
                    ,{id:9, firstName:'John', lastName:'Conan'}
                    ,{id:10, firstName:'Kate', lastName:'Willow'}
                    ,{id:11, firstName:'Mary', lastName:'Lee'}
                    ,{id:12, firstName:'Joe', lastName:'Berry'}
                    ,{id:13, firstName:'Kate', lastName:'Thompson'}
                    ,{id:14, firstName:'Mary', lastName:'Crow'}
                    ,{id:15, firstName:'Mary', lastName:'Lester'}
                    ,{id:16, firstName:'John', lastName:'Donald'}
                    ,{id:17, firstName:'Kate', lastName:'Haller'}
                    ,{id:18, firstName:'Joe', lastName:'Mall'}
                    ,{id:19, firstName:'Mary', lastName:'Tramp'}
                    ,{id:20, firstName:'Kate', lastName:'Delan'}
                ]
            }

            ,columns:[{
                 text:'First name'
                ,dataIndex:'firstName'
                ,flex:1
            },{
                 text:'Last name'
                ,dataIndex:'lastName'
                ,flex:2
            }]
        });

        // entry point
        Ext.onReady(function() {
            Ext.create('Ext.window.Window',{
                 autoShow:true
                ,width:400
                ,height:300
                ,border:false
                ,layout:'fit'
                ,items:[{xtype:'inlinegrid'}]
            });
            Ext.each(Ext.ComponentQuery.query('button[action=add]'), function(button) {
                button.on('click', function(btn) {
                    var  store = btn.up('grid').getStore()
                        ,firstName = 'Add Joe' === btn.getText() ? 'Joe' : 'John'
                    ;
                    store.add({firstName:firstName, lastName:'Smith'});
                });
            });
        }); // eo onReady

    </script>
</head>
<body>
</body>
</html>
<!-- eof -->

**colin.yates** · 1 Jul 2012 11:52 AM

Hiya - thanks for your efforts - shall I report this as a bug or have you already done so?

**jsakalos** · 1 Jul 2012 1:31 PM

This thread contains description and showcase (my last post) so I'll just move this thread to Bugs.

**Animal** · 1 Jul 2012 2:23 PM

There should probably be a filterOnAdd configuration.

And then the add method should test whether it passes the filter and put the new record into the appropriate collection.

(4.1) Should store.add respect filters?

Thread Tools

Search Thread

Display

(4.1) Should store.add respect filters?

(4.1) Should store.add respect filters?