ExtJS的6點視圖模型店的綁定和setter

我使用ExtJS的6建立一個過濾的數據視圖面板，這是我的面板：Panel.jsExtJS的6點視圖模型店的綁定和setter

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

視圖模型不執行任何操作;

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

在這一點上，按預期調用小部件設置器「setWidgets」。但是，當我使用商店的「filterBy」方法過濾商店時，我期望調用小部件設置器「setWidgets」，但事實並非如此。

我也嘗試通過執行以下操作重置商店;

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

，看是否存儲數據的重載將觸發部件二傳手「setWidgets」，但事實並非如此。

它看起來對viewModel存儲的改變只觸發一次調用setters的調用。

問題：

這是框架的一個特徵還是我不正確配置的東西。
如何重新配置view/store/viewModel，以便爲商店的每次更新/更改（即何時）調用小部件設置器「setWidgets」;
- 數據加載
- 店過濾
- 存儲數據的變化
- 商店更新

來源

2016-10-21 ClaraU

過濾商店不改變items情況下，它只會改變內容 - 這就是爲什麼setWidgets不會被再次調用。如果您想響應商店中的數據更改，則需要收聽商店發生的事件。

此外 - 綁定在widget.data.items是一個壞主意;這是插入商店的內部結構。聽而不是事件：

來源

2016-10-21 13:32:43

ExtJS的6點視圖模型店的綁定和setter

回答

相關問題