创建纯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>'
}

并定义'title-bar'CSS以使文本具有正确的样式/大小,并且ExtJS做正确的事情.

Answer 1

@bmoeskau答案显然是正确的(他共同创立了ExtJS).

但是我想澄清一下OP的编辑,这是好的,但它可能会混淆寻找类似的最小渲染仍然使用Ext组件的人.这是我正在谈论的代码:

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

上面的代码将创建一个完整的Ext.Panel(因为"面板"是defaultType每个Ext.Container的),这是很方便,因为面板有很多功能,但也许你看看代码,你希望得到的只是预期的div,而不是一堆嵌套的div,它们将包含你的标题栏div.如果是这种情况,您可能正在寻找类似于此的东西:

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

这将只渲染你的自定义类和你的html所期望的div,但是div还将包含其余的ExtJS定位和大小调整信息,这些信息可以让你利用Ext的布局系统.

Answer 2

这看起来像是一些严重的过度工程.制作组件的目的是以某种方式重用它.也许如果它有标题,课程等的配置,我可以看到这一点,但实际上,没有理由(除非你为了在这里发布而大幅过度简化？).为什么不直接将此div放入页面代码或Panel配置或包含它的任何内容？

仅供参考,可视化渲染的组件通常是BoxComponent的子类,因为它除了提供组件API之外还提供了大小和布局功能.使用标准的Ext布局,BoxComponents更容易工作.

编辑:请注意,在Ext 4中,BoxComponent不再存在.您现在只需使用Component作为此类大多数简单小部件的基础.