add extjs 6.0.1 sources

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

/**\r
 *\r
 * This example shows how to create a pivot grid and display the results in\r
 * an outline layout.\r
 *\r
 */\r
Ext.define('KitchenSink.view.pivot.LayoutOutline', {\r
    extend: 'Ext.pivot.Grid',\r
    xtype: 'outline-pivot-grid',\r
    controller: 'pivotlayout',\r
\r
    requires: [\r
        'KitchenSink.store.pivot.Sales',\r
        'KitchenSink.view.pivot.LayoutController'\r
    ],\r
\r
    title: 'Outline layout',\r
    collapsible: true,\r
    multiSelect: true,\r
    height: 350,\r
\r
    store: {\r
        type: 'sales'\r
    },\r
    selModel: {\r
        type: 'rowmodel'\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
        dataIndex:  'value',\r
        header:     'Sum of value',\r
        aggregator: 'sum',\r
        width:      90\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
        width:      80\r
    },{\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
        dataIndex:  'country',\r
        header:     'Country'\r
    }],\r
\r
    tbar: [{\r
        text: 'Collapsing',\r
        menu: [{\r
            text: 'Collapse all',\r
            handler: 'collapseAll'\r
        },{\r
            text: 'Expand all',\r
            handler: 'expandAll'\r
        }]\r
    },{\r
        text: 'Subtotals position',\r
        menu: {\r
            defaults: {\r
                xtype: 'menucheckitem',\r
                group:  'subtotals',\r
                checkHandler: 'subtotalsHandler'\r
            },\r
            items: [{\r
                text: 'First',\r
                checked: true\r
            },{\r
                text: 'Last'\r
            },{\r
                text: 'None'\r
            }]\r
        }\r
    },{\r
        text: 'Totals position',\r
        menu: {\r
            defaults: {\r
                xtype: 'menucheckitem',\r
                group:  'totals',\r
                checkHandler: 'totalsHandler'\r
            },\r
            items: [{\r
                text: 'First'\r
            },{\r
                text: 'Last',\r
                checked: true\r
            },{\r
                text: 'None'\r
            }]\r
        }\r
    }],\r
\r
    //<example>\r
    otherContent: [{\r
        type: 'Controller',\r
        path: 'classic/samples/view/pivot/LayoutController.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