extjs - Sencha Touch: Ext.draw.Component is not working at all -

i'm trying draw canvas screen using sencha touch , ext.draw.component. haven't been able make render whatsoever.

this main view, has been set initial view.

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'             }         ]     } }); 

this code draw.component, i'm trying use render basic shapes screen.

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);     }  }); 

i acutely puzzled this, , find unpleasant. appreciated, thanks.

use getsurface method instead of booking.view.drawcomponent

this.getsurface('main').add({     type: 'circle',     fill: '#79bb3f',     radius: 100,     x: 100,     y: 100 }).show(true); 

here link th fiddle.