Dynamically load store data and display in list

Question

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.

My store code is as follows:

 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/
                 }]
     },
 });

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. 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. My listview Code is as follows:

 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: [
                                         '<div>{Image}{Name}</div>'
                                    ],
                                },
                            ]
                        },        
                        {
                                xtype: 'container',
                                items: [
                                  {
                                     xtype: 'button',
                                     cls: 'btn',
                                     docked: 'bottom',
                                     margin: '0 0 0 0',
                                     text: 'Place Order'
                                  }
                                ]
                        }
                  ]
             }
        ]
     } 
});  

My Controller has a on item tap function assigned to the previous category view. The function is written here:

  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);
},

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?

Answer 1

I think the issue is while getting the list please change it as

var NVList = this.getNonVegList();