javascript 如何将简单的 dom 元素添加到 ExtJS 容器中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22376166/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add simple dom-element into ExtJS container?
提问by nkuhta
I want to add Canvaselement into ExtJSContainerelement. But it accepts only Ext.Component, not any dom element.
我想将Canvas元素添加到ExtJSContainer元素中。但它只接受Ext.Component，而不接受任何 dom 元素。
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.
如何将其插入容器，或者我需要使用另一个 ext 组件？我需要为组件提供一些调整大小的逻辑，容器拥有它。
回答by Evan Trimboli
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'
}
}
});
回答by Mike Thomsen
You can use the Container's updatemethod to put in raw HTML. Panel is a better object to use here because you can use its htmlconstructor config parameter to just dump whatever HTML you want upon creation. Ex:
您可以使用 Container 的update方法来放入原始 HTML。Panel 是一个更好的对象，因为您可以使用它的html构造函数配置参数在创建时转储您想要的任何 HTML。前任：
var panel = {
xtype: 'panel',
html: ['<div>',
'<p>Hi!</p>',
'</div>'].join("\n");
}
回答by Rob Agar
回答by Mehran Hatami
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:
或者您可以轻松添加您的 html 元素，例如：
Ext.getCmp('yourContainer').add(Ext.create('Ext.Panel', {
html: '<canvas></canvas>'
}));
