How to create Ext js widget with Ext.draw.engine.Canvas as an item?

Question

I want to create widget using Ext js, in which one item should be a canvas.

When I am trying to add an item as xtype: 'canvas', I am getting following error.

Ext.Loader is not enabled, so dependencies cannot be resolved dynamically.
Missing required class: tree {stack: (...), 
message: "Ext.Loader is not enabled, 
so dependencies cannot …esolved dynamically. 
Missing required class: tree", 
isInstance: true, $className: "Ext.Base", configClass: function…}

Following is my code snippet:

Ext.widget({
        xtype   : 'mz-form-widget',
        itemId: 'shopableImage',
        items: [
            {
                xtype: 'canvas',
                width: 750,
                height: 470,
                itemId: 'preview-container'
            }
        ],

How can I include a canvas item into my widget panel? Whats I am missing over here?

Answer 1

Canvas does not have an alias (xtype) defined, so you cannot configure it inline as above. You can either create it explicitly with Ext.create or you can go to an upper-level component such as Surface or Ext.draw.Container.