Ext.define('Ext.chart.LegendBase', { extend: 'Ext.dataview.DataView', config: { itemTpl: [ '<span class=\"', Ext.baseCSSPrefix, 'legend-item-marker {[ values.disabled ? Ext.baseCSSPrefix + \'legend-inactive\' : \'\' ]}\" style=\"background:{mark};\"></span>{name}' ], inline: true, // TODO: horizontalHeight and verticalHeight names look awkward; // TODO: they might be originally selected to prevent conflict with the Grid's property 'itemHeight' // TODO: (which would be a more appropriate name), but this isn't a grid, so the reasoning isn't clear. horizontalHeight: 48, verticalWidth: 150, position: '' }, constructor: function (config) { this.callParent([config]); var scroller = this.getScrollable(), onDrag = scroller.onDrag; scroller.onDrag = function (e) { e.stopPropagation(); onDrag.call(this, e); }; }, //<debug> applyPosition: function(position) { if (!position) { Ext.raise('Legend position must be "top", "right", "bottom" or "left".'); } return position; }, //</debug> updatePosition: function(position) { this.setDocked(position); }, updateDocked: function (docked, oldDocked) { var me = this; me.callParent([docked, oldDocked]); if (docked === 'top' || docked === 'bottom') { me.setLayout({type: 'hbox', pack: 'center'}); me.setInline(true); // TODO: Remove this when possible me.setWidth(null); me.setHeight(me.getHorizontalHeight()); if (me.getScrollable()) { me.setScrollable({direction: 'horizontal'}); } } else { me.setLayout({pack: 'center'}); me.setInline(false); // TODO: Remove this when possible me.setWidth(me.getVerticalWidth()); me.setHeight(null); if (me.getScrollable()) { me.setScrollable({direction: 'vertical'}); } } }, onItemTap: function (container, target, index, e) { this.callParent(arguments); this.toggleItem(index); }});