add extjs 6.0.1 sources

[extjs.git] / extjs / build / examples / kitchensink / modern / src / view / chart / Column.js

/**\r
 * Demonstrates how to use Ext.chart.ColumnChart\r
 */\r
Ext.define('KitchenSink.view.chart.Column', {\r
    extend: 'Ext.Panel',\r
    requires: [\r
        'Ext.chart.CartesianChart',\r
        'Ext.chart.interactions.ItemEdit',\r
        'Ext.chart.series.Bar',\r
        'Ext.chart.axis.Numeric',\r
        'Ext.chart.axis.Category'\r
    ],\r
\r
    controller: 'column-chart',\r
    layout: 'fit',\r
\r
    items: [{\r
        xtype: 'toolbar',\r
        top: 0,\r
        right: 0,\r
        zIndex: 50,\r
        cls: 'charttoolbar',\r
        style: {\r
            background: 'none',\r
            border: 'none'\r
        },\r
        items: [{\r
            xtype: 'spacer'\r
        }, {\r
            text: 'Preview',\r
            iconCls: 'x-fa fa-eye',\r
            platformConfig: {\r
                desktop: {\r
                    text: 'Download',\r
                    iconCls: 'x-fa fa-download'\r
                }\r
            },\r
            handler: 'onDownload'\r
        }, {\r
            text: 'Reload',\r
            iconCls: 'x-fa fa-refresh',\r
            handler: 'onReloadData'\r
        }]\r
    }, {\r
        xtype: 'cartesian',\r
        reference: 'chart',\r
        animation: Ext.isIE8 ? false : true,\r
        store: {\r
            type: 'climate'\r
        },\r
        insetPadding: {\r
            top: 50,\r
            bottom: 10,\r
            left: 0,\r
            right: 10\r
        },\r
        platformConfig: {\r
            desktop: {\r
                insetPadding: {\r
                    top: 50,\r
                    bottom: 40,\r
                    left: 20,\r
                    right: 40\r
                }\r
            }\r
        },\r
        interactions: [{\r
            type: 'itemedit',\r
            tooltip: {\r
                renderer: 'onEditTipRender'\r
            },\r
            renderer: 'onColumnEdit'\r
        }, {\r
            type: 'panzoom',\r
            axes: {\r
                left: {\r
                    allowPan: false,\r
                    allowZoom: false\r
                },\r
                bottom: {\r
                    allowPan: true,\r
                    allowZoom: true\r
                }\r
            }\r
        }],\r
        axes: [{\r
            type: 'numeric',\r
            position: 'left',\r
            minimum: 30,\r
            titleMargin: 20,\r
            title: {\r
                text: 'Temperature in °F'\r
            },\r
            listeners: {\r
                rangechange: 'onAxisRangeChange'\r
            }\r
        }, {\r
            type: 'category',\r
            position: 'bottom',\r
            visibleRange: [0, 0.5],\r
            platformConfig: {\r
                desktop: {\r
                    visibleRange: [0, 1]\r
                }\r
            }\r
        }],\r
        series: {\r
            type: 'bar',\r
            xField: 'month',\r
            yField: 'highF',\r
            style: {\r
                minGapWidth: 15\r
            },\r
            highlight: {\r
                strokeStyle: 'black',\r
                fillStyle: 'gold'\r
            },\r
            label: {\r
                field: 'highF',\r
                display: 'insideEnd',\r
                renderer: function (value) {\r
                    return value.toFixed(1);\r
                }\r
            }\r
        },\r
        sprites: {\r
            type: 'text',\r
            text: 'Redwood City Climate Data',\r
            fontSize: 22,\r
            width: 100,\r
            height: 30,\r
            x: 30, // the sprite x position\r
            y: 30  // the sprite y position\r
        },\r
        listeners: {\r
            initialize: 'onInitialize',\r
            afterrender: 'onAfterRender',\r
            beginitemedit: 'onBeginItemEdit',\r
            enditemedit: 'onEndItemEdit'\r
        }\r
    }]\r
\r
});