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

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

components extjs

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 年前

Brian Moeskau 11 年前

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

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

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的布局系统。

推荐文章

harunB10 · Sencha未被识别为内部或外部命令

7 年前

Y.Rad · 如何在特定位置添加项目

7 年前

Buwaneka Sudheera · 将数据发送到API并将其检索到网格中

7 年前

Nuri Engin · ExtJS无法显示Ext.panel。面板的html正确

7 年前

jenkelblankel · 绑定按钮在Ext JS中不起作用

7 年前

Hemant · 如何将onkeyup事件用于文本字段?

7 年前

Hari prasad kasavajjala · 在Ext JS中使用url返回方法为变量赋值

7 年前

Zoti · 具有无限滚动的extjs 6现代组合框

7 年前

user3183411 · ExtJS 3.2边界布局ext-comp-1004中未定义中心区域

7 年前

Vikas Hire · 在其存储更新中更新extjs图表配置

7 年前