创建纯HTML的自定义ExtJS的最佳方法 [英] Best approach to creating a custom ExtJS of pure HTML

问题描述

所以我需要创建一个ExtJS组件（2.3.0版）。我们目前的方法是创建一个自定义组件，如下所示：

So I have a need to create an ExtJS component (version 2.3.0). The component is simply plain HTML (styled) - it is a heading.

/**
 * 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中更好地利用一些内在魔法的方法，那将是很棒的。

This works fine, but I'm not convinced it is the "right" way to go about it. If anyone can share a more idiomatic way to do it, or a way that utilises some inner magic in ExtJS better, that would be great.

如果另一方面这个是正确的方式 - 让我们来看一个例子。

If on the other hand this is the "right" way to do it - let this be an example of how one can.

修改

我一直在努力与这一个。我现在采取的方法是：

I was definitely trying to hard with this one. The approach I now take is:

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

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

and define the 'title-bar' CSS to have the text the right style/size, and ExtJS does the right thing.

推荐答案

这看起来像一些严重的过度工程。制作某个组件的目的是为了以某种方式可重用。也许如果它有标题，课程等的配置，我可以看到这一点，但是就这样，没有理由（除非你在这里发布的目的大大过度简化了）。为什么不把这个div直接放到页面代码或面板配置或其中包含它？

This looks like some serious over-engineering. The purpose of making something a component is so that it's reusable in some fashion. Maybe if it had configs for the title, class, etc. I could see the point, but as it is, there's no reason (unless you have drastically over-simplified for the purpose of posting here?). Why not just put this div directly into the page code or Panel config or whatever is containing it?

FYI，视觉呈现的组件通常是子类BoxComponent，因为它提供了大小和布局除了Component API之外的功能。 BoxComponent使用标准的Ext布局更容易。

FYI, visually-rendered components usually subclass BoxComponent since it provides sizing and layout capabilities in addition to the Component API. BoxComponents work much easier with the standard Ext layouts.

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

Note that in Ext 4, BoxComponent no longer exists. You'd now simply use Component as a base for most simple widgets like this.

这篇关于创建纯HTML的自定义ExtJS的最佳方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！