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

所以我需要创建一个ExtJS组件（版本2.3.0）。该组件只是简单的HTML（样式） - 它是一个标题。创建纯HTML的自定义ExtJS的最佳方法

我目前的做法如下：创建一个自定义组件：

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

，并定义了“标题栏” CSS有文字合适的款式/大小，ExtJS的做正确的事。

来源

2009-12-15 Jamie Love

这看起来像是一些严重的过度工程。制作某个组件的目的是为了以某种方式重用。也许如果它为标题，班级等配置了我可以看到这个观点，但事实并非如此（除非你在这里发布的内容过于简化）。为什么不直接把这个div直接放入页面代码或面板配置或任何包含它？可视化渲染组件通常是BoxComponent的子类，因为它除了提供组件API外，还提供了大小和布局功能。使用标准的Ext布局，BoxComponents可以更轻松地工作。

编辑：请注意，在分机4中，BoxComponent不再存在。您现在只需将Component用作此类最简单小部件的基础。

来源

2009-12-15 05:27:55

同意。特别是因为它没有定制或重用;只需在标记中将其编码为div，然后使用contentEl将其拉入Ext.Panel。 – 2009-12-15 06:23:18

同意。顺便说一句：人们可以在阶级层次中爬得更高，以获得你描述的好处;容器是实现布局的最轻量级的类。 – Upperstage 2009-12-15 19:29:34

容器专门*包含*其他组件，因此可以管理其子组件的布局。 BoxComponent是最轻的类，可以通过Container进行管理，并且可以轻松地参与布局（调整大小和位置）。全部取决于您正在创建的组件的性质。 – 2009-12-16 04:07:07

@bmoeskau answer显然是正确的（他共同创建了ExtJS）。

但我想澄清一下OP's Edit，这很好，但它可能会让一些寻找类似的最小渲染仍在使用Ext组件的人感到困惑。这是我讲的代码：

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

上面的代码将创建一个完整的Ext.Panel（因为“面板”是每一个Ext.Container的defaultType），这是方便，因为面板有许多特性，但也许你看看代码，你期望得到只是预期的股利，而不是一堆嵌套的股利，其中将包含您的标题栏股。如果是这样的话，你很可能寻找类似这样：

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

而这将使只是希望你的自定义类和在HTML中的DIV，但该分区也将有ExtJS的定位其余并调整信息大小，让您可以利用Ext的版面系统。

来源

2010-11-02 19:30:31

真的很好的建议，非常感谢！ – 2012-08-28 10:35:25

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

回答

相关问题