代码之家  ›  专栏  ›  技术社区  ›  Jamie Love

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

  •  4
  • Jamie Love  · 技术社区  · 15 年前

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

    2 回复  |  直到 15 年前
        1
  •  6
  •   Brian Moeskau    11 年前

    仅供参考,可视化呈现的组件通常是BoxComponent的子类,因为除了组件API之外,它还提供大小调整和布局功能。BoxComponents与标准的Ext布局一起工作更容易。

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

        2
  •  16
  •   Community CDub    7 年前

    @bmoeskau answer 显然是正确的(他是ExtJS的联合创始人)。

    但我想澄清一下 OP's Edit ,这是可以的,但它可能会让仍在使用Ext组件寻找类似最小渲染的人感到困惑。这就是我所说的代码:

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

    上面的代码将创建一个完整的 Ext.Panel (因为“panel”是 defaultType 对于每个Ext.Container),这是很方便的,因为面板有很多特性,但是如果您查看代码,您可能希望得到的只是预期的div,而不是一堆嵌套的div,这些div将包含您的 . 如果是这种情况,您可能正在寻找类似的东西:

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

    这将只呈现自定义类和内部html所需的div,但该div还将包含其余的ExtJS定位和大小信息,这将让您利用Ext的布局系统。