add extjs 6.0.1 sources

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

/**\r
 *\r
 * This example shows how to create a pivot grid and let your end users\r
 * configure it.\r
 *\r
 */\r
Ext.define('KitchenSink.view.pivot.Configurator', {\r
    extend: 'Ext.pivot.Grid',\r
    xtype: 'configurable-pivot-grid',\r
    controller: 'pivotconfig',\r
\r
    requires: [\r
        'KitchenSink.view.pivot.ConfiguratorController',\r
        'KitchenSink.store.pivot.Sales',\r
        'Ext.pivot.plugin.Configurator'\r
    ],\r
\r
    title: 'Pivot Grid with Configurator plugin',\r
    collapsible: true,\r
    multiSelect: true,\r
    height: 350,\r
\r
    store: {\r
        type: 'sales'\r
    },\r
    selModel: {\r
        type: 'spreadsheet'\r
    },\r
\r
    plugins: [{\r
        ptype:      'pivotconfigurator',\r
        pluginId:   'configurator',\r
        // It is possible to configure a list of fields that can be used to configure the pivot grid\r
        // If no fields list is supplied then all fields from the Store model are fetched automatically\r
        fields: [{\r
            dataIndex:  'country',\r
            header:     'Country'\r
        }, {\r
            dataIndex:  'quantity',\r
            header:     'Qty',\r
            // You can even provide a default aggregator function to be used when this field is dropped\r
            // on the agg dimensions\r
            aggregator: 'min'\r
        }, {\r
            dataIndex:  'month',\r
            header:     'Month',\r
            renderer: function(v, meta){\r
                // This field can be dragged onto leftAxis or topAxis.\r
                // When added to the topAxis the renderer is used to generate the column text, which\r
                // means that only the value is passed to the function.\r
                // When added to the leftAxis the renderer is called twice, once to generate the\r
                // row labels and once by the grid panel so you can style the cell.\r
                // To style an aggregated cell you need to add the renderer to the aggregate dimension.\r
                return meta ? v : Ext.Date.monthNames[v];\r
            }\r
        }]\r
    }],\r
\r
    // Configure the aggregate dimensions. Multiple dimensions are supported.\r
    aggregate: [{\r
        dataIndex:  'value',\r
        header:     'Value',\r
        aggregator: 'avg'\r
    }],\r
\r
    // Configure the left axis dimensions that will be used to generate the grid rows\r
    leftAxis: [{\r
        dataIndex:  'person',\r
        header:     'Person'\r
    },{\r
        dataIndex:  'company',\r
        header:     'Company',\r
        sortable:   false\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
        dataIndex:  'year',\r
        header:     'Year'\r
    }],\r
\r
    header: {\r
        itemPosition: 1, // after title before collapse tool\r
        items: [{\r
            ui: 'default-toolbar',\r
            xtype: 'button',\r
            text: 'Dock',\r
            menu: {\r
                defaults: {\r
                    xtype: 'menucheckitem',\r
                    group:  'docking',\r
                    checkHandler: 'changeDock'\r
                },\r
                items: [{\r
                    text: 'Top'\r
                },{\r
                    text: 'Right',\r
                    checked: true\r
                },{\r
                    text: 'Bottom'\r
                },{\r
                    text: 'Left'\r
                }]\r
            }\r
        }]\r
    },\r
\r
    //<example>\r
    otherContent: [{\r
        type: 'Controller',\r
        path: 'classic/samples/view/pivot/ConfiguratorController.js'\r
    },{\r
        type: 'Model',\r
        path: 'classic/samples/model/pivot/Sale.js'\r
    },{\r
        type: 'Store',\r
        path: 'classic/samples/store/pivot/Sales.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