Javascript 如何将简单的dom元素添加到ExtJS容器中？

我想将

Canvas

元素添加到ExtJS

Container

元素中。但它只接受

Ext.Component

，不接受任何dom元素

画布创建代码：

canvas = document.createElement('canvas');

---

如何将其插入容器，或者我需要使用另一个ext组件？我需要为组件、容器设置一些调整大小的逻辑。

您可以使用容器的

update

方法放入原始HTML。这里使用Panel是一个更好的对象，因为您可以使用它的

html

constructor-config参数在创建时转储您想要的任何html。例：

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

var面板={
xtype:'面板'，
html:[''，
“嗨！
”，
''。加入（“\n”）；
}

您可以将面板作为画布容器添加到容器中，如：

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

或者，您可以轻松添加html元素，如：

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

Ext.getCmp（'yourcainer'）.add（Ext.create（'Ext.Panel'）{
html:'
}));

在这里很有用，例如：

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

---

最好的方法是创建一个组件，其中元素是画布。这样，你基本上可以“免费”得到所有内置的布局

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

---

这是最好的解决方案。是否可以为此画布设置id？

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