How to add simple dom-element into ExtJS container?

Question

I want to add Canvas element into ExtJS Container element. But it accepts only Ext.Component, not any dom element.

Canvas create code:

canvas = document.createElement('canvas');

How to insert it into container, or I need to use another ext component? I need to have some resize logic for component, container have it.

Answer 1

The best way to do this is to create a component where the element is the canvas. This way, you get all the built in layout stuff for "free" basically.

new Ext.container.Container({
    width: 400,
    height: 400,
    layout: 'fit',
    items: {
        xtype: 'component',
        autoEl: {
            tag: 'canvas'
        }
    }
});

Answer 2

You can use the Container's update method to put in raw HTML. Panel is a better object to use here because you can use its html constructor config parameter to just dump whatever HTML you want upon creation. Ex:

var panel = {
    xtype: 'panel',
    html: ['<div>',
        '<p>Hi!</p>',
        '</div>'].join("\n");
}

Answer 3

DomHelper is useful here, e.g:

Ext.DomHelper.append(your_container.body, { tag: 'canvas' })

Answer 4

you can add a panel to your container as your canvas container like:

Ext.getCmp('yourContainer').add(Ext.create('Ext.Panel', {
    html: '<div id="canvasContainer"></div>'
}));

then add your stuff to it:

var canvas = document.createElement('canvas');
$("#canvasContainer").appendChild(canvas);

or you can easily add your html element like:

Ext.getCmp('yourContainer').add(Ext.create('Ext.Panel', {
    html: '<canvas></canvas>'
}));