不带x-innerhtml的Extjs Widget/组件

Question

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

https://fiddle.sencha.com/#view/editor&fiddle/316j

例如，在这个小提琴中，总是有x-html html添加到组件中。这种情况可以避免吗？我希望有一个简单的组件，比如：

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

​

​

Answer 1

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

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

​

 Ext.define('MyWidget', {
     extend: 'Ext.Widget',
     xtype: 'mywidget',
     config: {
         html: ''
     },
     element: {
         reference: 'element'
     },

     constructor: function(config) {
         this.callParent([config]);
         this.element.setHtml(this.getHtml());
         Ext.getBody().appendChild(this.element);
     }
 });

Ext.application({
    name: 'Fiddle',

    launch: function () {
        let view = Ext.Viewport.add({
            xtype: 'container',
            items: [{
                xtype: 'mywidget',
                html: 'Test'
            }]
        });
    }
});

​

Answer 2

您可能还想查看autoEl配置https://docs.sencha.com/extjs/7.0.0/classic/Ext.Component.html#cfg-autoEl