ExtJS 6 fixations des magasins ViewModel et setters

Question

J'utilise ExtJS 6 pour construire un panneau dataview filtrables, voici mon panneau: Panel.js

Ext.define('myApp.view.main.widgets.Panel', { 
    extend: 'Ext.panel.Panel', 

    .... 

    viewModel: { 
     type: 'widgets-view-model', 
     stores: { 
      widgets: { 
       type: 'widgets' 
      } 
     } 
    }, 

    items: [{ 
     xtype: 'searchfield', 
     name: 'widgets-filter', 
     height: 24, 
     width: '100%', 
     bind: { 
      store: '{store}' 
     } 
    }, { 
     margin: '5 0 0 0', 
     autoScroll: true, 
     bodyPadding: 1, 
     flex: 1, 
     frame: true, 
     referenceHolder: true, 
     bind: { 
      widgets: '{widgets.data.items}' 
     }, 
     setWidgets: function (widgets) { 
      this.lookupReference('the-widget-items-panel').setWidgets(widgets); 
     }, 
     items: [{ 
      layout: { 
       type: 'vbox', 
       pack: 'start', 
       align: 'stretch' 
      }, 
      items: [{ 
       reference: 'the-widget-items-panel', 
       xtype: 'the-widgets' 
      }] 
     }] 
    }] 
}); 

ViewModel ne fait rien;

Ext.define('myApp.view.main.widgets.WidgetsViewModel', { 
    extend: 'Ext.app.ViewModel', 
    alias:'viewmodel.widgets-view-model' 
}); 

Dans le contrôleur de vue, procédez comme suit dans le gestionnaire d'événements AfterRender de la vue; A ce stade, le setter de widgets "setWidgets" est appelé comme prévu. Cependant, lorsque je filtre le magasin en utilisant la méthode "filterBy" du magasin, je m'attends à ce que les widgets "setWidgets" soient appelés, mais ce n'est pas le cas.

J'ai également essayé de réinitialiser le magasin en procédant comme suit;

store.removeAll(); 
store.load(function() { 
    console.log('reloaded...!') 
}); 

pour voir si un rechargement des données de stockage déclenchera les widgets setter « setWidgets », mais il ne fonctionne pas.

Il semble que les modifications apportées au magasin viewModel ne déclenchent les appels aux régleurs qu'une seule fois.

QUESTION:

1. Est-ce une caractéristique du cadre ou suis-je mal les choses en train de configurer.

2. Comment est-ce que je reconfigurer view/store/viewModel de sorte que le setter de widgets "setWidgets" soit appelé pour chaque mise à jour/changement au magasin, c'est-à-dire quand;

   données
   • est chargé
   • magasin est filtré
   • modifie les données du magasin
   • mises à jour de magasin

Answer 1

Filtrage un magasin ne change pas l'instance items, il change seulement contents - c'est pourquoi setWidgets n'est plus appelé. Si vous voulez répondre aux changements de données dans le magasin, vous devez écouter les événements du magasin.

Aussi - la liaison sur widget.data.items est une mauvaise idée; c'est brancher sur la structure interne du magasin. Écoutez les événements au lieu:

• load
• filterchange
• datachanged
• update