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

问题描述

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

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.

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

My current approach is to create a custom component as follows:

/**
 * 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>'
}

并定义标题栏"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?

仅供参考，视觉渲染的组件通常是 BoxComponent 的子类，因为它除了提供组件 API 之外还提供大小调整和布局功能.BoxComponents 使用标准 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屋！