/** * @class Ext.chart.Legend * @extends Ext.dataview.DataView * * A default legend for charts. * * @example preview * var chart = new Ext.chart.Chart({ * animate: true, * store: { * fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'], * data: [ * {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13}, * {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3}, * {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7}, * {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23}, * {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33} * ] * }, * legend: { * position: 'bottom' * }, * axes: [{ * type: 'numeric', * position: 'left', * fields: ['data1'], * title: { * text: 'Sample Values', * fontSize: 15 * }, * grid: true, * minimum: 0 * }, { * type: 'category', * position: 'bottom', * fields: ['name'], * title: { * text: 'Sample Values', * fontSize: 15 * } * }], * series: [{ * type: 'area', * title: ['Data1', 'Data2', 'Data3'], * subStyle: { * fill: ['blue', 'green', 'red'] * }, * xField: 'name', * yField: ['data1', 'data2', 'data3'] * * }] * }); * Ext.Viewport.setLayout('fit'); * Ext.Viewport.add(chart); */ Ext.define("Ext.chart.Legend", { xtype: 'legend', extend: "Ext.dataview.DataView", config: { itemTpl: [ "<span class=\"x-legend-item-marker {[values.disabled?\'x-legend-inactive\':\'\']}\" style=\"background:{mark};\"></span>{name}" ], baseCls: 'x-legend', padding: 5, disableSelection: true, inline: true, /** * @cfg {String} position * @deprecated Use `docked` instead. * Delegates to `docked` */ position: null, /** * @cfg {Boolean} toggleable 'true' if the series items in the legend can be toggled on and off. */ toggleable: true, docked: 'top', horizontalHeight: 48, verticalWidth: 150 }, constructor: function () { this.callSuper(arguments); var scroller = this.getScrollable().getScroller(), onDrag = scroller.onDrag; scroller.onDrag = function (e) { e.stopPropagation(); onDrag.call(this, e); }; }, doSetDocked: function (docked) { this.callSuper(arguments); if (docked === 'top' || docked === 'bottom') { this.setLayout({type: 'hbox', pack: 'center'}); this.setInline(true); // TODO: Remove this when possible this.setWidth(null); this.setHeight(this.getHorizontalHeight()); if (this.getScrollable()) { this.setScrollable({direction: 'horizontal'}); } } else { this.setLayout({pack: 'center'}); this.setInline(false); // TODO: Remove this when possible this.setWidth(this.getVerticalWidth()); this.setHeight(null); if (this.getScrollable()) { this.setScrollable({direction: 'vertical'}); } } }, setScrollable: function (scrollable) { this.callSuper(arguments); if (scrollable === true) { if (this.getDocked() === 'top' || this.getDocked() === 'bottom') { this.setScrollable({direction: 'horizontal'}); } else if (this.getDocked() === 'left' || this.getDocked() === 'right') { this.setScrollable({direction: 'vertical'}); } } }, setPosition: function (position) { this.setDocked(position); }, getPosition: function () { return this.getDocked(); }, onItemTap: function (container, target, index, e) { this.callSuper(arguments); if(this.getToggleable()) { var me = this, store = me.getStore(), record = store && store.getAt(index); record.beginEdit(); record.set('disabled', !record.get('disabled')); record.commit(); } } });