title: Sencha Touch: Ext.draw.Component is not working at all
body: <p>I'm trying to draw a canvas to the screen using Sencha Touch and Ext.draw.Component. I haven't been able to make anything render whatsoever.</p>
  
  <p>This is my main view, which has been set as the initial view.</p>
  
  <pre><code>Ext.define('Booking.view.panelOne', {
      extend: 'Ext.Panel',
      alias: 'widget.panelOne',
      requires: [
          'Booking.view.drawComponent'
      ],
      config: {
          itemId: 'panelOne',
          ui: 'light',
          layout: {
             type: 'card'
          },
          scrollable: 'horizontal',
          items: [
              {
                  xtype: 'drawComponent'
              }
          ]
      }
  });
  </code></pre>
  
  <p>This is the code for my draw.Component, which I'm trying to use to render basic shapes to the screen.</p>
  
  <pre><code>Ext.define('Booking.view.drawComponent', {
      extend: 'Ext.draw.Component',
      alias: 'widget.drawComponent',
  
      config: {
          docked: 'left',
          height: '100%',
          itemId: 'myComponent',
          width: '100%'
      },
  
      initialize: function() {
          this.callParent();
  
          Booking.view.drawComponent.getSurface('main').add({
              type: 'circle',
              fill: '#79BB3F',
              radius: 100,
              x: 100,
              y: 100
          }).show(true);
  
          Booking.view.drawComponent.surface.add({
              type: 'circle',
              fill: '#000',
              radius: 100,
              x: 300,
              y: 300
          }).show(true);
      }
  
  });
  </code></pre>
  
  <p>I am acutely puzzled by this, and find it to be very unpleasant. Any help is appreciated, thanks.</p>