add extjs 6.0.1 sources

[extjs.git] / extjs / build / examples / kitchensink / classic / samples / view / charts / combination / DashboardController.js

Ext.define('KitchenSink.view.charts.combination.DashboardController', {\r
    extend: 'Ext.app.ViewController',\r
    alias: 'controller.combination-dashboard',\r
\r
    form: null,\r
    selectedRec: null,\r
\r
    onColumnRender: function (v) {\r
        return v + '%';\r
    },\r
\r
    onItemHighlight: function (chart, item) {\r
        var gridPanel = this.lookupReference('gridPanel');\r
        gridPanel.getSelectionModel().select(item.record);\r
    },\r
\r
    onBarChartAxisLabelRender: function (axis, label, layoutContext) {\r
        return Ext.String.ellipsis(label, 15, false);\r
    },\r
\r
    onSelectionChange: function (model, records) {\r
        var me = this,\r
            fields;\r
\r
        if (records[0]) {\r
            me.selectedRec = records[0];\r
            if (!me.form) {\r
                me.form = me.lookupReference('form').getForm();\r
                fields = me.form.getFields();\r
                fields.each(function(field){\r
                    if (field.name != 'name') {\r
                        field.setDisabled(false);\r
                    }\r
                });\r
            } else {\r
                fields = me.form.getFields();\r
            }\r
\r
            // prevent change events from firing\r
            me.form.suspendEvents();\r
            me.form.loadRecord(me.selectedRec);\r
            me.lookupReference('fieldset').setTitle(me.selectedRec.get('name'));\r
            me.form.resumeEvents();\r
            me.highlightCompanyPriceBar(me.selectedRec);\r
        }\r
    },\r
\r
    // Loads fresh records into the radar store\r
    // based upon the passed company record.\r
    updateRadarChart: function (rec) {\r
        var store = this.lookupReference('radarChart').getStore();;\r
\r
        store.loadData([\r
            { 'Name': 'Price',     'Data': rec.get('price') },\r
            { 'Name': 'Revenue %', 'Data': rec.get('revenue') },\r
            { 'Name': 'Growth %',  'Data': rec.get('growth') },\r
            { 'Name': 'Product %', 'Data': rec.get('product') },\r
            { 'Name': 'Market %',  'Data': rec.get('market') }\r
        ]);\r
    },\r
\r
    // Performs the highlight of an item in the bar series.\r
    highlightCompanyPriceBar: function (record) {\r
        var barChart = this.lookupReference('barChart'),\r
            store = barChart.getStore(),\r
            series = barChart.getSeries()[0],\r
            name = record.get('name');\r
\r
        barChart.setHighlightItem(series.getItemByIndex(store.indexOf(record)));\r
    },\r
\r
    onStoreRefresh: function () {\r
        if (this.selectedRec) {\r
            this.highlightCompanyPriceBar(this.selectedRec);\r
        }\r
    },\r
\r
    onFormChange: function (field, newValue, oldValue, listener) {\r
        var me = this;\r
\r
        if (me.selectedRec && me.form) {\r
            if (newValue > field.maxValue) {\r
                field.setValue(field.maxValue);\r
            } else {\r
                if (me.form.isValid()) {\r
                    me.form.updateRecord(me.selectedRec);\r
                    me.updateRadarChart(me.selectedRec);\r
                }\r
            }\r
        }\r
    },\r
\r
    onAfterRender: function () {\r
        var barChart = this.lookupReference('barChart'),\r
            gridPanel = this.lookupReference('gridPanel');\r
\r
        var store = Ext.create('KitchenSink.store.Dashboard', {\r
            listeners: {\r
                // Add listener to (re)select bar item\r
                // after sorting or refreshing the dataset.\r
                refresh: {\r
                    fn: 'onStoreRefresh',\r
                    scope: this,\r
                    // Jump over the chart's refresh listener.\r
                    delay: 1\r
                }\r
            }\r
        });\r
\r
        barChart.setStore(store);\r
        gridPanel.setStore(store);\r
    }\r
\r
});