Our Web view model follows our design and fleshes it out with some implementation details:
// app/view/web/WebModel.js Ext.define('Instrumatics.view.web.WebModel', { extend: 'Ext.app.ViewModel', alias: 'viewmodel.web-web', stores: { logData: { type: 'logentries', filters: [ { property: 'startDate', value: '{currentStartDate}' }, { property: 'endDate', value: '{currentEndDate}' } ] }, logStatistics: { type: 'statistics', filters: [ { property: 'category', value: '{currentCategory}' }, { property: 'startDate', value: '{currentStartDate}' }, { property: 'endDate', value: '{currentEndDate}' } ] }, categories: { fields: ['text', 'value'], data: [{ text: 'Browser', value: 'browser' },{ text: 'Location', value: 'location' },{ text: 'Device Type', value: 'device' }] } }, data: { currentCategory: '', currentStartDate: null, currentEndDate: null } });
Note the bindings on the filters. This enables us to link the filters with a value on the view model, which in turn links through to values on the form controls in the view. This means that as soon as the user updates a form control, it'll update the filter on the store automatically, reloading the store, and redrawing the chart and grid.
We've also got a categories
store, which is simply a way of holding data for the categories combo, nothing more.