ExtJSの6のViewModelストアバインディングとセッター

Question

私は濾過可能なデータビューパネルを構築するためにExtJSの6を使用しています、これは私のパネルです：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には何もしません。

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

ビューコントローラでは、ビューのAfterrenderイベントハンドラで次の処理を行います。

onAfterRender: function() { 
    var store = this.view.getViewModel().getStore('widgets'); 
    store.load(); 
} 

どの時点で、ウィジェットのsetter "setWidgets"が期待どおりに呼び出されます。しかし、ストアの "filterBy"メソッドを使用してストアをフィルタリングすると、ウィジェットsetter "setWidgets"が呼び出されることが期待されますが、そうではありません。

また、次のようにしてストアをリセットしようとしました。ストアデータのリロードがウィジェットをトリガーするかどうかを確認するために

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

は「setWidgetsを」セッターですが、それはできません。

viewModelストアに変更を加えると、setterへの呼び出しが1回だけトリガーされます。

QUESTION：

1. は、このフレームワークの機能ですか私は間違って物事を設定しています。

2. ビュー/ストア/ viewModelを再設定して、ウィジェットのsetter "setWidgets"がストアの更新/変更ごとに呼び出されるようにするにはどうすればいいですか？

   • データがロードされ
   • ストアを濾過し
   • ストアデータは、
   • ストア更新

Answer 1

itemsインスタンスを変更しないストアをフィルタリングは、それだけ変化する変化します内容 - setWidgetsが再度呼び出されない理由です。店舗内で変化するデータに対応したい場合は、店舗からのイベントを聞く必要があります。

また、widget.data.itemsにバインドすることは悪い考えです。それは店の内部構造に差し込んでいます。代わりに、イベントに耳を傾ける：

• load
• filterchange
• datachanged
• update