add extjs 6.0.1 sources

[extjs.git] / extjs / build / examples / kitchensink / classic / samples / view / charts / bar3d / Basic.js

/**\r
 * A basic 3D bar chart is a chart with horizontal bars of lengths proportional to the\r
 * magnitudes of the data it represents. Basic 3D bars can be used in the same manner as the\r
 * 3D column charts. Categories are typically organized along the vertical axis and values\r
 * along the horizontal axis. Tapping or hovering a bar will highlight it.\r
 */\r
Ext.define('KitchenSink.view.charts.bar3d.Basic', {\r
    extend: 'Ext.Panel',\r
    xtype: 'bar-basic-3d',\r
    controller: 'bar-basic-3d',\r
\r
    requires: [\r
        'Ext.chart.theme.Muted'\r
    ],\r
\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/bar3d/BasicController.js'\r
    }, {\r
        type: 'Store',\r
        path: 'classic/samples/store/EconomySectors.js'\r
    }],\r
    // </example>\r
    width: 650,\r
\r
    items: [{\r
        xtype: 'cartesian',\r
        flipXY: true,\r
        reference: 'chart',\r
        width: '100%',\r
        height: 500,\r
        insetPadding: '40 40 30 40',\r
        innerPadding: '3 0 0 0',\r
        theme: {\r
            type: 'muted'\r
        },\r
        store: {\r
            type: 'economy-sectors'\r
        },\r
        animation: {\r
            easing: 'easeOut',\r
            duration: 500\r
        },\r
        interactions: ['itemhighlight'],\r
        axes: [{\r
            type: 'numeric3d',\r
            position: 'bottom',\r
            fields: 'ind',\r
            maximum: 4000000,\r
            majorTickSteps: 10,\r
            renderer: 'onAxisLabelRender',\r
            title: 'Billions of USD',\r
            grid: {\r
                odd: {\r
                    fillStyle: 'rgba(245, 245, 245, 1.0)'\r
                },\r
                even: {\r
                    fillStyle: 'rgba(255, 255, 255, 1.0)'\r
                }\r
            }\r
        }, {\r
            type: 'category3d',\r
            position: 'left',\r
            fields: 'country',\r
            label: {\r
                textAlign: 'right'\r
            },\r
            grid: true\r
        }],\r
        series: [{\r
            type: 'bar3d',\r
            xField: 'country',\r
            yField: 'ind',\r
            style: {\r
                minGapWidth: 10\r
            },\r
            highlight: true,\r
            label: {\r
                field: 'ind',\r
                display: 'insideEnd',\r
                renderer: 'onSeriesLabelRender'\r
            },\r
            tooltip: {\r
                trackMouse: true,\r
                renderer: 'onSeriesTooltipRender'\r
            }\r
        }],\r
        sprites: [{\r
            type: 'text',\r
            text: 'Industry size in major economies (2011)',\r
            fontSize: 22,\r
            width: 100,\r
            height: 30,\r
            x: 40, // the sprite x position\r
            y: 20  // the sprite y position\r
        }, {\r
            type: 'text',\r
            text: 'Source: http://en.wikipedia.org/wiki/List_of_countries_by_GDP_sector_composition',\r
            fontSize: 10,\r
            x: 12,\r
            y: 490\r
        }]\r
    }],\r
\r
    tbar: [\r
        '->',\r
        {\r
            text: 'Preview',\r
            handler: 'onPreview'\r
        }\r
    ]\r
\r
});\r