Динамически загружать данные хранилища и отображать их в списке

Question

Я пытаюсь показать набор элементов в виде списка. На сервере все элементы в одном файле относятся к различным подкатегориям с идентификатором категории, назначенным для каждой подкатегории. В настоящее время у меня есть магазин, который может импортировать все данные, если фильтр не применяется. В случае, если это так, в нем отображаются элементы, относящиеся к этой конкретной подкатегории.

Мой магазин код выглядит следующим образом:

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

Мое приложение имеет категории просмотра, которая показывает список категорий, а затем, а подкатегорий просмотра, который содержит элементы, относящиеся к категории, которая была выбрана. Я хочу отфильтровать данные, полученные из хранилища, динамически в зависимости от категории, выбранной пользователем в предыдущем представлении, и отобразить ее в списке. Мой код списка выглядит следующим образом:

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

Мой контроллер имеет функцию пункта пункта назначения, присвоенную предыдущему виду категории. Функция написана здесь:

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

В Я добавил фильтр, перезарядил магазин и использовать его в списке, но я получаю сообщение об ошибке, что «setStore» метод не доступен. Может ли кто-нибудь помочь мне в реализации фильтра динамически правильно?

Answer 1

Я думаю, что проблема при получении списка, пожалуйста, измените его

вар NVList = this.getNonVegList();