Data drilldown : getting store.filter to work

[plaasm]

Hi, have a problem doing data drilldown display w/ MVC and filtering


A Category dataview should respond to a tap by displaying subcategories in a second dataView. Should be a simple case of using a filter on the store of the subcategories, right?


Using ST PR3.0. Relevant code shown below.


Program flow:
app.js specifies
controllers : ['Viewport','Subcategories','Categories']


controller/Subcategories.js specifies
stores : ['Subcategories'],


controller/Viewport.js:

Ext.define('MyApp.controller.Viewport', {
  .
  .
  .
  views        : ['Categories','Subcategories','SubCatWrap'],
  .
  .


  // successfully fires from "Category" dataView on itemDisclosure tap 
  handleCategoryDisclose: function(record) {
       subCatStore    = Ext.getStore('Subcategories'),
 
        // add the subcategory dataview, wrapped so that it can appear in a panel
      newCard    = viewport.add({
        xtype : 'app-subcatwrap',
          //data  : record.data    // commented out b/c has no effect. Is there a way to specify only a subset of data here?
       });
        
     console.log('store info: ' + subCatStore);  // Successfully returns object w. correct data.
     subCatStore.removeAll();
      subCatStore.filters.clear();
      subCatStore.filter('itemcode', 'TTK');  // try to return multiple items w/ itemcode 'TTK' for second dataView
                                    // returns entire store instead


     viewport.setActiveItem(newCard, {type:'slide', direction: 'left'});  //displays the entire store, not desired subset in the second dataView
    
});

[mitchellsimoens]

Should be, filtering works for me in PR3:

var store = new Ext.data.Store({
    fields : ['text', 'group'],
    data   : [
        { text : 'a', group : 'letter' },
        { text : 'b', group : 'letter' },
        { text : 'c', group : 'letter' },
        { text : '6', group : 'number' },
        { text : 'd', group : 'letter' },
        { text : '7', group : 'number' },
        { text : 'e', group : 'letter' },
        { text : 'f', group : 'letter' },
        { text : '2', group : 'number' },
        { text : 'g', group : 'letter' },
        { text : 'h', group : 'letter' },
        { text : 'i', group : 'letter' },
        { text : 'j', group : 'letter' },
        { text : 'k', group : 'letter' },
        { text : '3', group : 'number' },
        { text : 'l', group : 'letter' },
        { text : 'm', group : 'letter' },
        { text : 'n', group : 'letter' },
        { text : 'o', group : 'letter' },
        { text : 'p', group : 'letter' },
        { text : 'q', group : 'letter' },
        { text : 'r', group : 'letter' },
        { text : '4', group : 'number' },
        { text : 's', group : 'letter' },
        { text : 't', group : 'letter' },
        { text : 'u', group : 'letter' },
        { text : 'v', group : 'letter' },
        { text : '5', group : 'number' },
        { text : 'w', group : 'letter' },
        { text : 'x', group : 'letter' },
        { text : 'y', group : 'letter' },
        { text : 'z', group : 'letter' },
        { text : '1', group : 'number' }
    ]
});

new Ext.dataview.DataView({
    fullscreen : true,
    itemTpl    : '{text}',
    store      : store
});

console.log('Unfiltered count: ' + store.getCount());

store.filter('group', 'number');

console.log('Filtered (number) count: ' + store.getCount());

store.clearFilter();
store.filter('group', 'letter');

console.log('Filtered (letter) count: ' + store.getCount());

[plaasm]

Thank you Mitchell for taking a look at this. After you confirmed that it should be working, I figured out what the problem was. I had declared

subCatStore = Ext.getStore('Subcategories')

in a variable declaration block at the top of the function (this does not show in my simplified code sample above):

handleCategoryDisclose function() {
var
subCatStore = Ext.getStore('Subcategories'),
},
// move declaration here to get view to update

When I moved that declaration out of the var definition and into the main body of the function, the dataView reflected filtering on the store. Strangely, the store.getCount() did update successfully after filtering with the declaration made in var block. The dataView did not reflect the changes, however, until the line was moved into the main function.