创建纯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屋!