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 answer显然是正确的（他共同创立了ExtJS）。

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

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

上面的代码将创建一个完整的Ext.Panel（因为“面板”是每个Ext.Container的defaultType），这很方便，因为面板有很多功能，但也许你看看代码，你希望只获得预期的div，而不是一堆嵌套的div，它们将包含你的 title-bar div 。如果是这种情况，您可能正在寻找类似的东西：

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

这将只渲染你的自定义类和你的html所期望的div，但是div也会有剩余的ExtJS定位和大小调整信息，这些信息可以让你利用Ext的布局系统。

Answer 2

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

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

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

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

2 个答案: