title: Dynamically load store data and display in list
body: <p>I am trying to show a set of items in a list view. The server has all the items in a single file belong to various sub categories with the category ID assigned for each sub category. Currently, I have a store can import all the data if a filter is not applied. In case it is, it shows items belonging to that particular sub category. </p>
  
  <p>My store code is as follows:</p>
  
  <pre><code> Ext.define('RestaurantGlobal.store.SubCategoryColumnsStoreNonVeg', {
       extend: 'Ext.data.Store',
  
       requires: [
           'RestaurantGlobal.model.ItemColumns'
       ],
  
       config: {
           autoLoad: false,
           model: 'RestaurantGlobal.model.ItemColumns',
           storeId: 'SubCategoryColumnsStoreNonVeg',
           proxy: {
               type: 'ajax',
               url: 'data/NonVegItemsColumnsStore.json',
               reader: {
                   type: 'json',
                   rootProperty: 'Item'
               }
           },
           filters: [{
                       property: 'SubCategory_id',
                       value: /0c9b01f6b3b2493b907a42e07010064800001/
                   }]
       },
   });
  </code></pre>
  
  <p>My app has a categories view that shows the list of categories and then, a sub categories view that contains items belonging to the category that has been selected. <strong>I want to filter the data that is received from the store dynamically based on the category selected by the user in the previous view and display it in the list</strong>. My listview Code is as follows:</p>
  
  <pre><code> Ext.define('RestaurantGlobal.view.SubCategories', {
       extend: 'Ext.navigation.View',
       xtype: 'SubCategories',
  
  config: {
      layout: {
          type: 'card'
      },
      items:[
          {
              xtype: 'container',
              title: 'Category Name',
              styleHtmlCls: 'maincontainer',
              styleHtmlContent: true,
              layout: {
                  type: 'vbox'
              },
               items: [
                          {
                              xtype: 'container',
                              title: 'Non-Veg',
                              margin: '0 10 0 10',
                              items: [
                                  {
                                      xtype: 'list',
                                      id: 'nonVegList',
                                      autoPaging: true,
                                      height: '100%',
                                      store: 'SubCategoryColumnsStoreVeg',
                                      itemTpl: [
                                           '&lt;div&gt;{Image}{Name}&lt;/div&gt;'
                                      ],
                                  },
                              ]
                          },        
                          {
                                  xtype: 'container',
                                  items: [
                                    {
                                       xtype: 'button',
                                       cls: 'btn',
                                       docked: 'bottom',
                                       margin: '0 0 0 0',
                                       text: 'Place Order'
                                    }
                                  ]
                          }
                    ]
               }
          ]
       } 
  });  
  </code></pre>
  
  <p>My Controller has a on item tap function assigned to the previous category view. The function is written here:</p>
  
  <pre><code>  onCustomDataViewItemTap: function(dataview, index, target, record, e, eOpts) {
      categoryId = record._data.id;
  
      var NonVegStore =       Ext.create('RestaurantGlobal.store.SubCategoryColumnsStoreNonVeg');
      // clear all existing filters
      NonVegStore.clearFilter();
      NonVegStore.filter('SubCategory_id', '/' + categoryId + '/');
      NonVegStore.load();
      var NVList = this.getNonVegList;
      NVList.setStore(NonVegStore);
  
      var SubCategories = Ext.create('RestaurantGlobal.view.SubCategories');
      Ext.Viewport.add(SubCategories);
      Ext.Viewport.setActiveItem(SubCategories);
  },
  </code></pre>
  
  <p>In I have added the filter, reloaded the store and used it with the list but I get an error saying that "setStore" method is not available. Can anyone please help me in implementing the filter dynamically correctly? </p>