add extjs 6.0.1 sources

[extjs.git] / extjs / examples / kitchensink / classic / samples / view / pivot / RemoteCalculations.js

/**\r
 *\r
 * This example shows how to create a pivot grid with remote calculations\r
 * and how to drill down the results.\r
 *\r
 * DblClick a cell to open the drill down window and see all records used to\r
 * aggregate that cell.\r
 *\r
 */\r
Ext.define('KitchenSink.view.pivot.RemoteCalculations', {\r
    extend: 'Ext.pivot.Grid',\r
    xtype: 'remote-pivot-grid',\r
    controller: 'remotecalculations',\r
\r
    requires: [\r
        'KitchenSink.view.pivot.RemoteCalculationsController'\r
    ],\r
\r
    title: 'Remote calculations',\r
    collapsible: true,\r
    multiSelect: true,\r
    height: 350,\r
\r
    selModel: {\r
        type: 'spreadsheet'\r
    },\r
\r
    // Set matrix specific configuration\r
    matrixConfig: {\r
        type:   'remote',\r
        url:    '/KitchenSink/RemoteSalesData'\r
    },\r
\r
    plugins: [{\r
        ptype: 'pivotdrilldown',\r
        // define the columns used by the grid\r
        columns: [\r
            {dataIndex: 'company', text: 'Company'},\r
            {dataIndex: 'continent', text: 'Continent'},\r
            {dataIndex: 'country', text: 'Country'},\r
            {dataIndex: 'person', text: 'Person'},\r
            {dataIndex: 'date', text: 'Date', xtype: 'datecolumn'},\r
            {dataIndex: 'value', text: 'Value', xtype: 'numbercolumn', align: 'right'},\r
            {dataIndex: 'quantity', text: 'Qty', xtype: 'numbercolumn', align: 'right'},\r
            {dataIndex: 'year', text: 'Year', xtype: 'numbercolumn', formatter: 'number(0)', align: 'right'},\r
            {dataIndex: 'month', text: 'Month', xtype: 'numbercolumn', formatter: 'number(0)', align: 'right'}\r
        ],\r
\r
        // define a remote store that will be used to filter the records\r
        remoteStore: {\r
            model: 'KitchenSink.model.pivot.Sale',\r
\r
            proxy: {\r
                // load using HTTP\r
                type: 'ajax',\r
                url: '/KitchenSink/RemoteSalesData',\r
                // the return will be JSON, so lets set up a reader\r
                reader: {\r
                    type: 'json',\r
                    rootProperty: 'data'\r
                }\r
            }\r
        }\r
    }],\r
\r
    // Set layout type to "outline". If this config is missing then the default layout is "outline"\r
    viewLayoutType: 'outline',\r
\r
    // Set this to false if multiple dimensions are configured on leftAxis and\r
    // you want to automatically expand the row groups when calculations are ready.\r
    startRowGroupsCollapsed: false,\r
\r
    // Configure the aggregate dimensions. Multiple dimensions are supported.\r
    aggregate: [{\r
        // id was provided for a better understanding of the JSON response\r
        id:         'valueAgg',\r
        dataIndex:  'value',\r
        header:     'Sum of value',\r
        aggregator: 'sum',\r
        width:      90\r
    },{\r
        // id was provided for a better understanding of the JSON response\r
        id:         'countAgg',\r
        dataIndex:  'id',\r
        header:     'Count',\r
        aggregator: 'count',\r
        width:      80\r
    }],\r
\r
    // Configure the left axis dimensions that will be used to generate the grid rows\r
    leftAxis: [{\r
        // id was provided for a better understanding of the JSON response\r
        id:         'person',\r
        dataIndex:  'person',\r
        header:     'Person',\r
        width:      80\r
    },{\r
        // id was provided for a better understanding of the JSON response\r
        id:         'company',\r
        dataIndex:  'company',\r
        header:     'Company',\r
        sortable:   false,\r
        width:      80\r
    }],\r
\r
    /**\r
     * Configure the top axis dimensions that will be used to generate the columns.\r
     * When columns are generated the aggregate dimensions are also used. If multiple aggregation dimensions\r
     * are defined then each top axis result will have in the end a column header with children\r
     * columns for each aggregate dimension defined.\r
     */\r
    topAxis: [{\r
        // id was provided for a better understanding of the JSON response\r
        id:         'country',\r
        dataIndex:  'country',\r
        header:     'Country'\r
    }],\r
\r
    listeners: {\r
        pivotdone:  'onPivotDone'\r
    },\r
\r
    //<example>\r
    otherContent: [{\r
        type: 'Controller',\r
        path: 'classic/samples/view/pivot/RemoteCalculationsController.js'\r
    }],\r
    profiles: {\r
        classic: {\r
            width: 600\r
        },\r
        neptune: {\r
            width: 750\r
        }\r
    },\r
    //</example>\r
\r
    initComponent: function () {\r
        var me = this;\r
\r
        me.width = me.profileInfo.width;\r
\r
        me.callParent();\r
    }\r
});\r