extjs - 创建纯 HTML 的自定义 ExtJS 的最佳方法

Question

所以我需要创建一个 ExtJS 组件(版本 2.3.0)。该组件只是简单的 HTML(样式)——它是一个标题。

我目前的方法是创建一个自定义组件如下:

/**
 * A ExtJS component for a header for the application
 */
Ext.ux.AppHeader = Ext.extend(Ext.Component, {

    height: 32,

    tpl: new Ext.Template ('<div class="title-bar"><h1>My App</h1></div>'),

    onRender: function(ct) {
        this.el  = this.tpl.append (ct);
        Ext.ux.AppHeader.superclass.onRender.apply(this, arguments);
    }
});

Ext.reg('AppHeader', Ext.ux.AppHeader);

这工作正常，但我不相信这是实现它的“正确”方式。如果有人可以分享一种更惯用的方法，或者一种更好地利用 ExtJS 中一些内在魔法的方法，那就太好了。

另一方面，如果这是做到这一点的“正确”方式——让这成为一个例子。

编辑

我肯定是在努力解决这个问题。我现在采取的方法是:

{
  html: '<div class="title-bar"><h1>My App</h1></div>'
}

并定义“标题栏”CSS 以使文本具有正确的样式/大小，而 ExtJS 会做正确的事情。

Answer 1

@bmoeskau answer显然是正确的(他共同创立了 ExtJS)。

但我想澄清一下 OP's Edit ，这是可以的，但它可能会使寻找类似最小渲染仍然使用 Ext 组件的人感到困惑。这是我正在谈论的代码:

{ html: '<div class="title-bar"><h1>My App</h1></div>' }

上面的代码将创建一个完整的 Ext.Panel (因为“面板”是每个 Ext.Container 的 defaultType)，这很方便，因为面板有很多功能，但也许您查看代码并希望得到预期的 div，而不是一堆嵌套divs 将包含您的标题栏 div。如果是这种情况，您可能正在寻找与此类似的内容:

{ xtype: 'box', autoEl: { tag: 'div', cls: 'title-bar', html: '<h1>My App</h1>' }}

这将仅呈现您的自定义类和您的 html 所期望的 div，但该 div 还将具有其他 ExtJS 定位和大小信息，这将让您利用 Ext 的布局系统。