A view on the Web

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.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset