Filtering a store upon view instantiation

[jlyman]

I feel like I am starting to get the hang of the MVC methodology in ST2, and enjoy my mini-victories when something actually shows up on the screen. That being said, I've run into a problem that has me stumped, despite extensive searching.

I have a view that contains two lists (specifically, one list with clocked in users, one with clocked out users). I have a User model and a Users store backing the lists and providing data. Currently, if I assign both lists to use store: 'Users' it works just fine. Here is the code I'm using in the view to instantiate one of the lists:

{                        
    xtype: 'list',
   flex: 1,
   cls: 'clockedInList',
   itemTpl: '<span class="employee">{lastName}, {firstName}</span>', 
   grouped: true,
   indexBar: false,
   store: 'Users'
} 

However, I want to tell each list to filter the store down to just those who are clocked in or out by checking the boolean value in the model. I know I can assign a store via either store: 'Users' or store: Ext.create('MyApp.store.Users'), but then when I try to chain a filter method on to the create() for example, I get a 'Cannot call method 'getGroups' of null, so I'm guessing the store object isn't created just yet.

I've even tried defining store: 'Users', and then hooking into the initialization() method to set a new one, but the list disappears when I try this (see code below).

store: 'Users',
initialize: function() {                             
   console.log('running initializes...');
   var store = Ext.getStore("Users"); 
   if (!store) { 
      console.log('store not found, creating');
      store = Ext.create("Users"); 
   } else console.log('store found, using existing...');
   this.store = store; 
   this.callParent(arguments); 
} 

Could someone shed some light on the proper way to do this, and maybe fill in the holes in my understanding? Thanks so much!

[mitchellsimoens]

Are you wanting to use the same store instance or each list have it's own store?

[jlyman]

Preferably, I'd like both lists to use the same store, just filtered. That way I only have to make one request to fill it instead of two, and management would be a lot easier.

[jlyman]

Any pointers anyone? I'd appreciate it!

[jlyman]

(darn, had a good long post written up and the page ate it on preview, so here's a condensed version):

Looks like this isn't possible how I was envisioning it at the time. Instead, it sounds like you need to create a base store, and then use that base store to load sub-stores manually (original idea found here: http://www.sencha.com/forum/showthre...ferent-filters).

So for example, here's the code from my base model (Users.js) which manually loads data into my two sub-stores (UsersIn.js, UsersOut.js). See the constructor object for the actually loading:

Ext.define('app.store.Users', {    
extend: 'Ext.data.Store',        
model: 'app.model.User',    
sorters: 'lastName',    
autoLoad: true,        

getGroupString: function(record) {        
           return record.get('lastName')[0];    
},        

constructor: function () {        
           this.callParent(arguments);                
           // Load the sub stores from this one based on the data loaded.        
           this.on('load', function (store, records, successful, operation, opts) {             
           var inStore = Ext.getStore('UsersIn');
            var outStore = Ext.getStore('UsersOut');

            inStore.removeAll();
            outStore.removeAll();

            for (var i=0; i<records.length; i++) {
                if (records[i].data.clockedIn != '')
                    inStore.add(records[i]);
                else
                     outStore.add(records[i]);
            }
        }, this);
    }
    }); 

[kyomster]

Any other way to do that ? Can a 2 views have the same store instance and each one different store filter ?

[mitchellsimoens]

Any other way to do that ? Can a 2 views have the same store instance and each one different store filter ?

No, if you filter a store in one view, the other view will reflect this filter.

[jlyman]

Not that I've seen. Because views are essentially stateless in ST, a change to a store when one view is visible would technically also reflect in the view that isn't visible. If both of those views don't show at the same time, you could always refilter the store on show, but if both are visible at the same time, then you might be out of luck and would need to use a solution like I mentioned earlier.

But if anybody else knows of a better way, by all means please pipe in, I'd love to know!

[mitchellsimoens]

Not that I've seen. Because views are essentially stateless in ST, a change to a store when one view is visible would technically also reflect in the view that isn't visible. If both of those views don't show at the same time, you could always refilter the store on show, but if both are visible at the same time, then you might be out of luck and would need to use a solution like I mentioned earlier.

But if anybody else knows of a better way, by all means please pipe in, I'd love to know!

That's unneeded DOM reflow. Having a separate store for each view is the more performant way. But it's totally up to you.