add extjs 6.0.1 sources

[extjs.git] / extjs / build / examples / kitchensink / classic / samples / view / charts / column3d / Grouped.js

/**\r
 * Grouped 3D Columns are column charts where categories are grouped next to each\r
 * other. This is typically done to visually represent the total of all categories for a\r
 * given period or value.\r
 */\r
Ext.define('KitchenSink.view.charts.column3d.Grouped', {\r
    extend: 'Ext.Panel',\r
    xtype: 'column-grouped-3d',\r
    requires: ['Ext.chart.theme.Muted'],\r
    controller: 'column-grouped-3d',\r
    // <example>\r
    // Content between example tags is omitted from code preview.\r
    bodyStyle: 'background: transparent !important',\r
    layout: {\r
        type: 'vbox',\r
        pack: 'center'\r
    },\r
    otherContent: [{\r
        type: 'Controller',\r
        path: 'classic/samples/view/charts/column3d/GroupedController.js'\r
    }, {\r
        type: 'Store',\r
        path: 'classic/samples/store/TwoYearSales.js'\r
    }],\r
    // </example>\r
    width: 650,\r
\r
    items: [{\r
        xtype: 'cartesian',\r
        width: '100%',\r
        height: 400,\r
        theme: 'Muted',\r
        insetPadding: '70 40 0 40',\r
        interactions: ['itemhighlight'],\r
        animation: {\r
            duration: 200\r
        },\r
        store: {\r
            type: 'two-year-sales'\r
        },\r
        legend: {\r
            docked: 'bottom'\r
        },\r
        sprites: [{\r
            type: 'text',\r
            text: 'Sales in Last Two Years',\r
            textAlign: 'center',\r
            fontSize: 18,\r
            fontWeight: 'bold',\r
            width: 100,\r
            height: 30,\r
            x: 325, // the sprite x position\r
            y: 30  // the sprite y position\r
        }, {\r
            type: 'text',\r
            text: 'Quarter-wise comparison',\r
            textAlign: 'center',\r
            fontSize: 16,\r
            x: 325,\r
            y: 50\r
        }, {\r
            type: 'text',\r
            text: 'Source: http://www.w3schools.com/',\r
            fontSize: 10,\r
            x: 12,\r
            y: 495\r
        }],\r
        axes: [{\r
            type: 'numeric3d',\r
            position: 'left',\r
            fields: ['2013', '2014'],\r
            grid: true,\r
            title: 'Sales in USD',\r
            renderer: 'onAxisLabelRender'\r
        }, {\r
            type: 'category3d',\r
            position: 'bottom',\r
            fields: 'quarter',\r
            title: {\r
                text: 'Quarter',\r
                translationX: -30\r
            },\r
            grid: true\r
        }],\r
        series: {\r
            type: 'bar3d',\r
            stacked: false,\r
            title: ['Previous Year', 'Current Year'],\r
            xField: 'quarter',\r
            yField: ['2013', '2014'],\r
            label: {\r
                field: ['2013', '2014'],\r
                display: 'insideEnd',\r
                renderer: 'onSeriesLabelRender'\r
            },\r
            highlight: true,\r
            style: {\r
                inGroupGapWidth: -7\r
            }\r
        }\r
        //<example>\r
    }, {\r
        style: 'margin-top: 10px;',\r
        xtype: 'container',\r
        layout: {\r
            type: 'hbox',\r
            pack: 'center'\r
        },\r
        width: '100%',\r
        items: [{\r
            xtype: 'gridpanel',\r
            width: 300,\r
            columns : {\r
                defaults: {\r
                    sortable: false,\r
                    menuDisabled: true,\r
                    renderer: 'onGridColumnRender'\r
                },\r
                items: [\r
                    { text: 'Quarter', dataIndex: 'quarter', renderer: Ext.identityFn },\r
                    { text: '2013', dataIndex: '2013' },\r
                    { text: '2014', dataIndex: '2014' }\r
                ]\r
            },\r
            store: {\r
                type: 'two-year-sales'\r
            }\r
        }]\r
        //</example>\r
    }]\r
\r
});\r