Getting the following exception while trying sencha charts 2 beta version


  • [COLOR=red !important]Uncaught TypeError: Cannot read property 'selectors' of undefined Theme.js:69[/COLOR]
    • [COLOR=red !important]Ext.define.applyStyles[/COLOR]Theme.js:69
    • [COLOR=red !important]Ext.define.applyStyles[/COLOR]Chart.js:484
    • [COLOR=red !important]Ext.define.constructor[/COLOR]Chart.js:473
    • [COLOR=red !important]Ext.apply.create.Class[/COLOR]sencha-touch.js:4919
    • [COLOR=red !important]Ext.define.initialize[/COLOR]NewsIndexGraph.js:51
    • [COLOR=red !important]Ext.define.constructor[/COLOR]Component.js:931
    • [COLOR=red !important]Base.implement.callParent[/COLOR]sencha-touch.js:4524
    • [COLOR=red !important]Ext.define.override.constructor[/COLOR]Component.js:2478
    • [COLOR=red !important]Base.implement.callParent[/COLOR]sencha-touch.js:4524
    • [COLOR=red !important]Ext.define.constructor[/COLOR]Container.js:349
    • [COLOR=red !important]Base.implement.callParent[/COLOR]sencha-touch.js:4524
    • [COLOR=red !important]override.constructor[/COLOR]Container.js:1485
    • [COLOR=red !important]Ext.apply.create.Class[/COLOR]sencha-touch.js:4919
    • [COLOR=red !important](anonymous function)[/COLOR]
    • [COLOR=red !important]Ext.ClassManager.instantiate[/COLOR]sencha-touch.js:6391
    • [COLOR=red !important]Ext.ClassManager.instantiateByAlias[/COLOR]sencha-touch.js:6309
    • [COLOR=red !important]Ext.apply.factory[/COLOR]sencha-touch.js:9355
    • [COLOR=red !important]Ext.define.factoryItem[/COLOR]Container.js:599
    • [COLOR=red !important]Ext.define.add[/COLOR]Container.js:671
    • [COLOR=red !important]Base.implement.callParent[/COLOR]sencha-touch.js:4524
    • [COLOR=red !important]override.add[/COLOR]Container.js:1524
    • [COLOR=red !important]Ext.define.applyItems[/COLOR]Container.js:517
    • [COLOR=red !important]Ext.apply.generateSetter.setter[/COLOR]sencha-touch.js:5192
    • [COLOR=red !important]Ext.apply.generateInitGetter[/COLOR]sencha-touch.js:5225
    • [COLOR=red !important]Ext.define.applyActiveItem[/COLOR]Container.js:1181
    • [COLOR=red !important](anonymous function)[/COLOR]Evented.js:23
    • [COLOR=red !important]Base.implement.initConfig[/COLOR]sencha-touch.js:4666
    • [COLOR=red !important]Ext.define.constructor[/COLOR]Component.js:929
    • [COLOR=red !important]Base.implement.callParent[/COLOR]sencha-touch.js:4524
    • [COLOR=red !important]Ext.define.override.constructor[/COLOR]Component.js:2478
    • [COLOR=red !important]Base.implement.callParent[/COLOR]sencha-touch.js:4524
    • [COLOR=red !important]Ext.define.constructor[/COLOR]Container.js:349
    • [COLOR=red !important]Base.implement.callParent[/COLOR]sencha-touch.js:4524
    • [COLOR=red !important]override.constructor[/COLOR]Container.js:1485
    • [COLOR=red !important]Ext.apply.create.Class[/COLOR]sencha-touch.js:4919
    • [COLOR=red !important](anonymous function)[/COLOR]
    • [COLOR=red !important]Ext.ClassManager.instantiate[/COLOR]sencha-touch.js:6391
    • [COLOR=red !important]Ext.ClassManager.instantiateByAlias[/COLOR]sencha-touch.js:6309
    • [COLOR=red !important]Ext.apply.factory[/COLOR]sencha-touch.js:9355
    • [COLOR=red !important]Ext.define.factoryItem[/COLOR]Container.js:599
    • [COLOR=red !important]Ext.define.add[/COLOR]Container.js:671
    • [COLOR=red !important]Base.implement.callParent[/COLOR]sencha-touch.js:4524
    • [COLOR=red !important]override.add[/COLOR]Container.js:1524
    • [COLOR=red !important]Ext.define.applyItems[/COLOR]Container.js:517
    • [COLOR=red !important]Ext.apply.generateSetter.setter[/COLOR]sencha-touch.js:5192
    • [COLOR=red !important]Ext.apply.generateInitGetter[/COLOR]sencha-touch.js:5225
    • [COLOR=red !important]Ext.define.applyActiveItem[/COLOR]Container.js:1181
    • [COLOR=red !important](anonymous function)[/COLOR]Evented.js:23
    • [COLOR=red !important]Base.implement.initConfig[/COLOR]sencha-touch.js:4666
    • [COLOR=red !important]Ext.define.constructor[/COLOR]Component.js:929
    • [COLOR=red !important]Base.implement.callParent[/COLOR]sencha-touch.js:4524
    • [COLOR=red !important]Ext.define.override.constructor[/COLOR]Component.js:2478
    • [COLOR=red !important]Base.implement.callParent[/COLOR]sencha-touch.js:4524
    • [COLOR=red !important]Ext.define.constructor[/COLOR]Container.js:349
    • [COLOR=red !important]Base.implement.callParent[/COLOR]sencha-touch.js:4524
    • [COLOR=red !important]override.constructor[/COLOR]Container.js:1485
    • [COLOR=red !important]Ext.apply.create.Class[/COLOR]sencha-touch.js:4919
    • [COLOR=red !important](anonymous function)[/COLOR]
    • [COLOR=red !important]Ext.ClassManager.instantiate[/COLOR]sencha-touch.js:6391
    • [COLOR=red !important]Ext.apply.factory[/COLOR]sencha-touch.js:9373
    • [COLOR=red !important]Ext.define.factoryItem[/COLOR]Container.js:599
    • [COLOR=red !important]Ext.define.add[/COLOR]Container.js:671
    • [COLOR=red !important]Base.implement.callParent[/COLOR]sencha-touch.js:4524
    • [COLOR=red !important]override.add[/COLOR]Container.js:1524
    • [COLOR=red !important]Ext.define.applyItems[/COLOR]Container.js:517
    • [COLOR=red !important]Ext.apply.generateSetter.setter[/COLOR]sencha-touch.js:5192
    • [COLOR=red !important]Ext.apply.generateInitGetter[/COLOR]sencha-touch.js:5225
    • [COLOR=red !important]Ext.define.applyActiveItem[/COLOR]View.js:356
    • [COLOR=red !important](anonymous function)[/COLOR]Evented.js:23
    • [COLOR=red !important]Base.implement.initConfig[/COLOR]sencha-touch.js:4666
    • [COLOR=red !important]Ext.define.constructor[/COLOR]Component.js:929
    • [COLOR=red !important]Base.implement.callParent[/COLOR]sencha-touch.js:4524
    • [COLOR=red !important]Ext.define.override.constructor[/COLOR]Component.js:2478
    • [COLOR=red !important]Base.implement.callParent[/COLOR]sencha-touch.js:4524
    • [COLOR=red !important]Ext.define.constructor[/COLOR]Container.js:349
    • [COLOR=red !important]Base.implement.callParent[/COLOR]sencha-touch.js:4524
    • [COLOR=red !important]override.constructor[/COLOR]Container.js:1485
    • [COLOR=red !important]Ext.apply.create.Class[/COLOR]sencha-touch.js:4919
    • [COLOR=red !important](anonymous function)[/COLOR]
    • [COLOR=red !important]Ext.ClassManager.instantiate[/COLOR]sencha-touch.js:6391
    • [COLOR=red !important]Ext.ClassManager.instantiateByAlias[/COLOR]sencha-touch.js:6309
    • [COLOR=red !important]Ext.apply.factory[/COLOR]sencha-touch.js:9355
    • [COLOR=red !important]Ext.define.factoryItemWithDefaults[/COLOR]Container.js:645
    • [COLOR=red !important]Base.implement.callParent[/COLOR]sencha-touch.js:4524
    • [COLOR=red !important]override.factoryItemWithDefaults[/COLOR]Container.js:1599
    • [COLOR=red !important]Ext.define.add[/COLOR]Container.js:671
    • [COLOR=red !important]Base.implement.callParent[/COLOR]sencha-touch.js:4524
    • [COLOR=red !important]override.add[/COLOR]Container.js:1524
    • [COLOR=red !important]Ext.define.initialize[/COLOR]YesterdayNewsDetails.js:32
    • [COLOR=red !important]Ext.define.constructor[/COLOR]Component.js:931
    • [COLOR=red !important]Base.implement.callParent[/COLOR]sencha-touch.js:4524
    • [COLOR=red !important]Ext.define.override.constructor[/COLOR]Component.js:2478
    • [COLOR=red !important]Base.implement.callParent[/COLOR]sencha-touch.js:4524
    • [COLOR=red !important]Ext.define.constructor[/COLOR]Container.js:349
    • [COLOR=red !important]Base.implement.callParent[/COLOR]sencha-touch.js:4524
    • [COLOR=red !important]override.constructor[/COLOR]Container.js:1485
    • [COLOR=red !important]Ext.apply.create.Class[/COLOR]sencha-touch.js:4919
    • [COLOR=red !important](anonymous function)[/COLOR]
    • [COLOR=red !important]Ext.ClassManager.instantiate[/COLOR]sencha-touch.js:6391
    • [COLOR=red !important]Ext.ClassManager.instantiateByAlias[/COLOR]sencha-touch.js:6309
    • [COLOR=red !important]Ext.apply.factory[/COLOR]sencha-touch.js:9355
    • [COLOR=red !important]Ext.define.factoryItemWithDefaults[/COLOR]Container.js:645
    • [COLOR=red !important]Base.implement.callParent[/COLOR]sencha-touch.js:4524
    • [COLOR=red !important]override.factoryItemWithDefaults[/COLOR]Container.js:1599
    • [COLOR=red !important]Ext.define.add[/COLOR]Container.js:671
    • [COLOR=red !important]Base.implement.callParent[/COLOR]sencha-touch.js:4524
    • [COLOR=red !important]override.add[/COLOR]Container.js:1524
    • [COLOR=red !important]Ext.define.applyItems[/COLOR]Container.js:517
    • [COLOR=red !important]Ext.apply.generateSetter.setter[/COLOR]sencha-touch.js:5192
    • [COLOR=red !important]Ext.apply.generateInitGetter[/COLOR]sencha-touch.js:5225
    • [COLOR=red !important]Ext.define.applyActiveItem[/COLOR]Container.js:1181
    • [COLOR=red !important](anonymous function)[/COLOR]Evented.js:23
    • [COLOR=red !important]Base.implement.initConfig[/COLOR]sencha-touch.js:4666
    • [COLOR=red !important]Ext.define.constructor[/COLOR]Component.js:929
    • [COLOR=red !important]Base.implement.callParent[/COLOR]sencha-touch.js:4524
    • [COLOR=red !important]Ext.define.override.constructor[/COLOR]Component.js:2478
    • [COLOR=red !important]Base.implement.callParent[/COLOR]sencha-touch.js:4524
    • [COLOR=red !important]Ext.define.constructor[/COLOR]Container.js:349
    • [COLOR=red !important]Base.implement.callParent[/COLOR]sencha-touch.js:4524
    • [COLOR=red !important]override.constructor[/COLOR]Container.js:1485
    • [COLOR=red !important]Ext.apply.create.Class[/COLOR]sencha-touch.js:4919
    • [COLOR=red !important](anonymous function)[/COLOR]
    • [COLOR=red !important]Ext.ClassManager.instantiate[/COLOR]sencha-touch.js:6391
    • [COLOR=red !important]Ext.ClassManager.instantiateByAlias[/COLOR]sencha-touch.js:6309
    • [COLOR=red !important]Ext.apply.factory[/COLOR]sencha-touch.js:9355
    • [COLOR=red !important]Ext.define.factoryItem[/COLOR]Container.js:599
    • [COLOR=red !important]Ext.define.add[/COLOR]Container.js:671
    • [COLOR=red !important]Base.implement.callParent[/COLOR]sencha-touch.js:4524
    • [COLOR=red !important]override.add[/COLOR]Container.js:1524
    • [COLOR=red !important]Ext.define.launch[/COLOR]Tablet.js:18
    • [COLOR=red !important]Ext.define.onDependenciesLoaded[/COLOR]Application.js:598
    • [COLOR=red !important]Ext.apply.require[/COLOR]sencha-touch.js:7793
    • [COLOR=red !important](anonymous function)[/COLOR]sencha-touch.js:3198
    • [COLOR=red !important]Ext.define.loadControllerDependencies[/COLOR]Application.js:567
    • [COLOR=red !important]Ext.apply.refreshQueue[/COLOR]sencha-touch.js:7542
    • [COLOR=red !important]Ext.apply.refreshQueue[/COLOR]sencha-touch.js:7543
    • [COLOR=red !important]Ext.apply.refreshQueue[/COLOR]sencha-touch.js:7543
    • [COLOR=red !important]Ext.apply.refreshQueue[/COLOR]sencha-touch.js:7543
    • [COLOR=red !important]Ext.apply.refreshQueue[/COLOR]sencha-touch.js:7543
    • [COLOR=red !important]Ext.apply.refreshQueue[/COLOR]sencha-touch.js:7543
    • [COLOR=red !important]Ext.apply.refreshQueue[/COLOR]sencha-touch.js:7543
    • [COLOR=red !important]Ext.apply.refreshQueue[/COLOR]sencha-touch.js:7543
    • [COLOR=red !important]Ext.apply.refreshQueue[/COLOR]sencha-touch.js:7543
    • [COLOR=red !important]Ext.apply.refreshQueue[/COLOR]sencha-touch.js:7543
    • [COLOR=red !important]Ext.apply.refreshQueue[/COLOR]sencha-touch.js:7543
    • [COLOR=red !important]Ext.apply.refreshQueue[/COLOR]sencha-touch.js:7543
    • [COLOR=red !important]Ext.apply.refreshQueue[/COLOR]sencha-touch.js:7543
    • [COLOR=red !important]Ext.apply.refreshQueue[/COLOR]sencha-touch.js:7543
    • [COLOR=red !important]Ext.apply.refreshQueue[/COLOR]sencha-touch.js:7543
    • [COLOR=red !important]Ext.apply.refreshQueue[/COLOR]sencha-touch.js:7543
    • [COLOR=red !important]Ext.apply.refreshQueue[/COLOR]sencha-touch.js:7543
    • [COLOR=red !important]Ext.apply.refreshQueue[/COLOR]sencha-touch.js:7543
    • [COLOR=red !important]Ext.apply.refreshQueue[/COLOR]sencha-touch.js:7543
    • [COLOR=red !important]Ext.apply.refreshQueue[/COLOR]sencha-touch.js:7543
    • [COLOR=red !important]Ext.apply.refreshQueue[/COLOR]sencha-touch.js:7543
    • [COLOR=red !important]Ext.apply.refreshQueue[/COLOR]sencha-touch.js:7543
    • [COLOR=red !important]Ext.apply.refreshQueue[/COLOR]sencha-touch.js:7543
    • [COLOR=red !important]Ext.apply.refreshQueue[/COLOR]sencha-touch.js:7543
    • [COLOR=red !important]Ext.apply.onFileLoaded[/COLOR]sencha-touch.js:7866
    • [COLOR=red !important](anonymous function)[/COLOR]sencha-touch.js:3184
    • [COLOR=red !important]Ext.apply.injectScriptElement.onLoadFn[/COLOR]sencha-touch.js:7561

      Here is the code

      Ext.define("mReports.view.NewsIndexGraph", {
      extend : 'Ext.Panel',
      xtype : 'newsindexgraph',
      style : 'borderolid;border-radius:25px;border-color:lightgray ;border-width:10px;',
      requires : ['Ext.chart.Panel', 'Ext.chart.axis.Numeric', 'Ext.chart.Chart','Ext.chart.Panel',
      'Ext.chart.axis.Category', 'Ext.chart.series.Pie',
      'Ext.chart.series.Series'],
      initialize : function() {


      this.callParent(arguments);


      var graphPanel = {
      xtype : 'panel',
      html : 'News Index Graph here'
      };
      var data = [], i;
      var floor = 20;
      var n = 20;
      floor = (!floor && floor !== 0) ? 20 : floor;


      for (i = 0; i < (n || 12); i++) {
      console.log("Month = " + Ext.Date.monthNames[i % 12]);
      data.push({
      name : Ext.Date.monthNames[i % 12],
      2007 : 5


      });
      };
      Ext.define('User', {
      extend : 'Ext.data.Model',
      config : {
      fields : [{
      name : 'name'
      },


      {
      name : '2007',
      type : 'int'
      }


      ]
      }
      });


      var storec1 = Ext.create('Ext.data.Store', {
      model : 'User',
      // fields: ['name', 'data1', 'data2', 'data3', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', 'iphone', 'android', 'ipad'],
      data : data
      });

      var chart = new Ext.chart.Chart({
      themeCls : 'pie1',
      theme : 'Demo',
      store : storec1,
      shadow : false,
      animate : true,
      insetPadding : 20,
      legend : {
      position : 'right'
      },
      interactions : [{
      type : 'reset',
      confirm : true
      }, {
      type : 'rotate'
      }, 'itemhighlight', {
      type : 'iteminfo',
      gesture : 'longpress',
      listeners : {
      show : function(interaction, item, panel) {
      var storeItem = item.storeItem;
      console.log(storeItem);
      panel.setHtml([
      '<ul><li><b>Month: </b>'
      + storeItem.get('name')
      + '</li>',
      '<li><b>Value: </b> '
      + storeItem.get('2007')
      + '</li></ul>']
      .join(''));
      }
      }
      }],
      series : [{
      type : 'pie',
      field : '2007',
      showInLegend : true,
      highlight : false,
      listeners : {
      'labelOverflow' : function(label, item) {
      item.useCallout = true;
      }
      },
      // Example to return as soon as styling arrives for callouts
      callouts : {
      renderer : function(callout, storeItem) {
      callout.label.setAttributes({
      text : storeItem
      .get('name')


      }, true);

      },
      filter : function() {
      return false;
      },
      box : {
      //no config here.
      },
      lines : {
      'stroke-width' : 2,
      offsetFromViz : 20
      },
      label : {
      font : 'italic 14px Arial'
      },
      styles : {
      font : '14px Arial'
      }
      },
      label : {
      field : 'name'
      }
      }]
      });
      // var drawComponent = new Ext.draw.Component({
      // items : [{
      // type : 'circle',
      // fill : '#79BB3F',
      // radius : 100,
      // x : 100,
      // y : 100
      // }]
      // });
      var chartPanel = Ext.create('Ext.Panel', {
      fullscreen : true,
      title : 'title',
      buttons : [{
      xtype : 'button',
      iconCls : 'help',
      iconMask : true,
      ui : 'plain'
      // handler: onHelpTap
      }, {
      xtype : 'button',
      iconCls : 'shuffle',
      iconMask : true,
      ui : 'plain'
      // handler : onRefreshTap
      }],
      chart : graphPanel
      });


      var chartPanel1 = new Ext.Panel({
      fullscreen : true,
      items : [drawComponent]
      });


      this.add([chartPanel]);
      }


      // ,
      // config : {
      // border : 3,
      // layout : 'vbox'
      // }
      // config:
      // {
      // html : 'News Index Graph here'
      // },
      // launch: function() {
      // console.log("NewsIndexGraph launch Called");
      //
      // }


      });