title: ExtJs 5.1.0 - Unrecognized class name / alias: widget.cartesian
body: <p>I want to show a stacked area chart in a new window. The enviroment is the ExtJs Webdesktop.
  When I create the window through:
  Ext.create('Desktop.displayPresences.view.displayPresencesChart').show()</p>
  
  <p>I always get these error messages: </p>
  
  <pre><code>mypath/desktop/widget/cartesian.js?_dc=1423082524533 404 (Not Found)
  Error: [Ext.create] Unrecognized class name / alias: widget.cartesian
  </code></pre>
  
  <p>I researched a lot but couldn't solve the problem yet.
  What I've done:</p>
  
  <p>Added this to app.json</p>
  
  <pre><code>"requires": [
          "ext-charts"
      ],
  </code></pre>
  
  <p>Through sencha cmd I tried these commands</p>
  
  <pre><code>sencha app build
  sencha app refresh
  sencha app watch
  </code></pre>
  
  <p>In the google develeopers tools in the sources tab I can see that the necessary file 'Ext.chart.series.Cartesian' is loaded. It is in the packages/ext-charts/src/chart/series folder.</p>
  
  <p>This is my code</p>
  
  <pre><code>Ext.define('Desktop.displayPresences.view.displayPresencesChart', {
      extend: 'Ext.Window',
  
      requires: [
          'Ext.chart.*',
          'Ext.data.JsonStore'
      ],
      xtype: 'area-stacked',
  
  
      width: 650,
  
      initComponent: function() {
          var me = this;
  
          this.myDataStore = Ext.create('Ext.data.JsonStore', {
              fields: ['month', 'data1', 'data2', 'data3', 'data4' ],
              data: [
                  { month: 'Jan', data1: 20, data2: 37, data3: 35, data4: 4 },
                  { month: 'Feb', data1: 20, data2: 37, data3: 36, data4: 5 },
                  { month: 'Mar', data1: 19, data2: 36, data3: 37, data4: 4 },
                  { month: 'Apr', data1: 18, data2: 36, data3: 38, data4: 5 },
                  { month: 'May', data1: 18, data2: 35, data3: 39, data4: 4 },
                  { month: 'Jun', data1: 17, data2: 34, data3: 42, data4: 4 },
                  { month: 'Jul', data1: 16, data2: 34, data3: 43, data4: 4 },
                  { month: 'Aug', data1: 16, data2: 33, data3: 44, data4: 4 },
                  { month: 'Sep', data1: 16, data2: 32, data3: 44, data4: 4 },
                  { month: 'Oct', data1: 16, data2: 32, data3: 45, data4: 4 },
                  { month: 'Nov', data1: 15, data2: 31, data3: 46, data4: 4 },
                  { month: 'Dec', data1: 15, data2: 31, data3: 47, data4: 4 }
              ]
          });
  
          me.items = [{
              xtype: 'cartesian',
              width: '100%',
              height: 500,
              legend: {
                  docked: 'bottom'
              },
              store: this.myDataStore,
              insetPadding: 40,
              sprites: [{
                  type: 'text',
                  text: 'Area Charts - Stacked Area',
                  font: '22px Helvetica',
                  width: 100,
                  height: 30,
                  x: 40, // the sprite x position
                  y: 20  // the sprite y position
              }, {
                  type: 'text',
                  text: 'Data: Browser Stats 2012',
                  font: '10px Helvetica',
                  x: 12,
                  y: 430
              }, {
                  type: 'text',
                  text: 'Source: http://www.w3schools.com/',
                  font: '10px Helvetica',
                  x: 12,
                  y: 440
              }],
              axes: [{
                  type: 'numeric',
                  fields: 'data1',
                  position: 'left',
                  grid: true,
                  minimum: 0,
                  renderer: function (v) { return v.toFixed(v &lt; 10 ? 1: 0) + '%'; }
              }, {
                  type: 'category',
                  fields: 'month',
                  position: 'bottom',
                  grid: true,
                  label: {
                      rotate: {
                          degrees: -45
                      }
                  }
              }],
              series: [{
                  type: 'area',
                  axis: 'left',
                  title: [ 'IE', 'Firefox', 'Chrome', 'Safari' ],
                  xField: 'month',
                  yField: [ 'data1', 'data2', 'data3', 'data4' ],
                  style: {
                      opacity: 0.80
                  },
                  highlight: {
                      fillStyle: '#000',
                      lineWidth: 2,
                      strokeStyle: '#fff'
                  },
                  tooltip: {
                      trackMouse: true,
                      style: 'background: #fff',
                      renderer: function(storeItem, item) {
                          var browser = item.series.getTitle()[Ext.Array.indexOf(item.series.getYField(), item.field)];
                          this.setHtml(browser + ' for ' + storeItem.get('month') + ': ' + storeItem.get(item.field) + '%');
                      }
                  }
              }]
          }];
  
          this.callParent();
      }
  });
  </code></pre>
  
  <p>I don't know why the xtype: 'cartesian' is searching at this location (mypath/desktop/widget/cartesian.js)?</p>
  
  <p>Normally you need for an xtype an alias, but when I check Ext.chart.series.Cartesian there is no alias definied?
  So I tried to define one by myself. But then I just got the message: Uncaught TypeError: undefined is not a function.</p>
  
  <p>Any ideas how to fix this?</p>
  
  <p>This is my file structure in the developer tools:</p>
  
  <p><img src="https://i.stack.imgur.com/FLlxP.png" alt=""></p>
  
  <p>Best regards</p>