不带x-innerhtml的Extjs小部件/组件

如何使用ExtJS7生成最简单的html小部件

例如，在这个fiddle中，总是有x-inner-html添加到组件中。这能避免吗？我希望有一个简单的组件，如：

<div id="ext-component-1" class="x-component x-layout-auto-item" data-xid="6">This is a test</div>

这是一个测试

---

您可以创建自己的扩展Ext.Widget的组件

尝试用以下代码替换您的小提琴代码：

Ext.define（'MyWidget'{
扩展：“Ext.Widget”，
xtype:'mywidget'，
配置：{
html:'
},
要素：{
参考：“元素”
},
构造函数：函数（配置）{
this.callParent（[config]）；
this.element.setHtml（this.getHtml（））；
Ext.getBody（）.appendChild（this.element）；
}
});
外部应用程序({
名字：“小提琴”，
启动：函数（）{
让视图=Ext.Viewport.add({
xtype:'容器'，
项目：[{
xtype:'mywidget'，
html:“测试”
}]
});
}
});您可能还想签出
autoEl
config