創建純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的最佳方法

回答

相關問題