add extjs 6.0.1 sources

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

/**\r
 * This example shows how to use a 3D column chart with a renderer\r
 * to alter the look of individual columns in the series based on\r
 * certain criteria (in this case column index).\r
 */\r
Ext.define('KitchenSink.view.charts.column3d.Renderer', {\r
    extend: 'Ext.Panel',\r
    xtype: 'column-renderer-3d',\r
    controller: 'column-renderer-3d',\r
    requires: ['Ext.chart.theme.Muted'],\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/column3d/RendererController.js'\r
    }, {\r
        type: 'Store',\r
        path: 'classic/samples/store/Browsers.js'\r
    }],\r
    // </example>\r
    width: 650,\r
\r
    items: [{\r
        xtype: 'cartesian',\r
        width: '100%',\r
        height: 500,\r
        interactions: {\r
            type: 'panzoom',\r
            zoomOnPanGesture: true\r
        },\r
        store: {\r
            type: 'browsers'\r
        },\r
        theme: {\r
            type: 'muted'\r
        },\r
        insetPadding: '60 40 40 40',\r
        innerPadding: '0 4 0 3',\r
        axes: [{\r
            type: 'numeric3d',\r
            fields: 'data3',\r
            position: 'left',\r
            grid: true,\r
            renderer: 'onAxisLabelRender'\r
        }, {\r
            type: 'category',\r
            fields: 'month',\r
            position: 'bottom',\r
            grid: true,\r
            label: {\r
                rotate: {\r
                    degrees: -45\r
                }\r
            },\r
            visibleRange: [0, 0.75]\r
        }],\r
        series: [{\r
            type: 'bar3d',\r
            xField: 'month',\r
            yField: 'data3',\r
            label: {\r
                field: 'data3',\r
                display: 'over'\r
            },\r
            highlight: {\r
                fillStyle: 'rgba(43, 130, 186, 1.0)',\r
                strokeStyle: 'brown',\r
                showStroke: true,\r
                lineWidth: 2\r
            },\r
            tooltip: {\r
                trackMouse: true,\r
                showDelay: 0,\r
                dismissDelay: 0,\r
                hideDelay: 0,\r
                renderer: 'onTooltipRender'\r
            },\r
            renderer: 'onColumnRender'\r
\r
        }],\r
        sprites: [{\r
            type: 'text',\r
            text: 'Renderer assigns a unique color to each column in a series',\r
            fontSize: 22,\r
            width: 100,\r
            height: 30,\r
            x: 40, // the sprite x position\r
            y: 40  // the sprite y position\r
        }, {\r
            type: 'text',\r
            text: 'Data: Google Chrome marker share in 2012 (Browser Stats)',\r
            fontSize: 10,\r
            x: 12,\r
            y: 470\r
        }, {\r
            type: 'text',\r
            text: 'Source: http://www.w3schools.com/',\r
            fontSize: 10,\r
            x: 12,\r
            y: 485\r
        }]\r
    }]\r
\r
});