src/examples/charts/app/view/piescroller/Panel.js

   1 Ext.define('Charts.view.piescroller.Panel', {
   2     extend: 'Ext.Panel',
   3     xtype: 'piescrollerpanel',
   4
   5     requires: [
   6         'Charts.view.piescroller.Chart'
   7     ],
   8
   9     config: {
  10         layout: 'vbox',
  11         align: 'stretch',
  12         cls: 'piescrollerpanel',
  13         style: 'border-left: 2px solid black; border-right: 2px solid black;',
  14
  15         items: [
  16             {
  17                 xtype: 'piescrollerchart',
  18                 flex: 1
  19             },
  20             {
  21                 xtype: 'list',
  22                 flex: 1,
  23                 store: 'PieScroller',
  24
  25                 itemTpl: [
  26                     '<div class= "coloredRectangle"></div>',
  27                     '<div style="margin-left: 40px;">{name}',
  28                         '<div class="myListValue">${value},000</div>',
  29                     '</div>'
  30                 ],
  31
  32                 listeners: {
  33                     itemtap: function (list, index) {
  34                         var chart = this.up('piescrollerpanel').down('polar'),
  35                             series = chart.getSeries()[0],
  36                             sprite = series.getSprites()[index],
  37                             currentAngle = (sprite.attr.startAngle + sprite.attr.endAngle) / 2;
  38
  39                         // match to bottom position
  40                         currentAngle -= (90 * Math.PI / 180);
  41
  42                         chart.getInteractions()[0].rotateTo(-currentAngle);
  43                     }
  44                 }
  45             }
  46         ]
  47     }
  48 });