Extjs 研究ノート 5: renderTo と applyTo_extjs の違いの詳細

ExtJS の renderTo と applyTo の違い

applyTo と renderTo についての理解と考え方

個人的には、これら 2 つの記事は十分に人気がないと思います。最終的にどのようなコードが生成されるかを確認する簡単な例を作成します。

コードをコピーします コードは次のとおりです:

このコードによって生成される HTML は次のとおりです:

applyTo:button の場合、生成されるコードは次のとおりです:

明らかに、簡単に言えば、

applyTo は指定された要素の後にコンポーネントを追加し、renderTo は指定された要素

内にコンポーネントを追加します。 次に、extjs ソース コードの謎についてもう少し詳しく見てみましょう。これら 2 つの構成項目が extjs の内部でどのように使用されるかを確認し、firebug プラグインを使用して ext-all-debug.js ファイルをデバッグします。

Ext.Component のコンストラクターに次のようなコードがあります Ext.Component = function(config){…} (バージョン 3.1.0 は 9270 行目):

コードをコピー コードは次のとおりです。

if(this.applyTo){

this.applyToMarkup(this.applyTo); >this.applyTo を削除します;
}else if(this.renderTo){
this.render(this.renderTo);


可視の applyTo 属性により Component は applyToMarkup メソッドを呼び出し、renderTo により render メソッドが呼び出されます。両方が設定されている場合、applyTo のみが有効になります。これは extjs ドキュメントでも具体的に指摘されています。

appylToMarkup メソッドは次のとおりです (3.1.0 バージョンは 9560 行)、

コードをコピー

コードは次のとおりです次のように: applyToMarkup : function(el){ this.allowDomMove = false; this.el = Ext.get(el); .el.dom.parentNode);

}

これも最終的に render を呼び出しますが、render の位置はparentNode であり、render メソッドは次のとおりです (バージョン 3.1.0 は行 9370) )

コードをコピー

コードは次のとおりです:

render : function(container,position){
if(!this.rendered && this.fireEvent('beforerender', this) !== false){
if(!container && this .el){
this.el = Ext.get(this.el);
コンテナ = this.el.dom.parentNode;
this.allowDomMove = false;
}
this.container = Ext.get(container);
if(this.ctCls){
this.container.addClass(this.ctCls);
}
this.rendered = true;
if(位置 !== 未定義){
if(Ext.isNumber(位置)){
位置 = this.container.dom.childNodes[位置];
}else{
position = Ext.getDom(position);
}
}
this.onRender(this.container,position || null);
if(this.autoShow){
this.el.removeClass(['x-hidden','x-hide-' this.hideMode]);
}
if(this.cls){
this.el.addClass(this.cls);
this.cls を削除します。
}
if(this.style){
this.el.applyStyles(this.style);
this.style を削除します。
}
if(this.overCls){
this.el.addClassOnOver(this.overCls);
}
this.fireEvent('render', this);

var contentTarget = this.getContentTarget();
if (this.html){
contentTarget.update(Ext.DomHelper.markup(this.html));
this.html を削除します。
}
if (this.contentEl){
var ce = Ext.getDom(this.contentEl);
Ext.fly(ce).removeClass(['x-hidden', 'x-hide-display']);
contentTarget.appendChild(ce);
}
if (this.tpl) {
if (!this.tpl.compile) {
this.tpl = new Ext.XTemplate(this.tpl);
}
if (this.data) {
this.tpl[this.tplWriteMode](contentTarget, this.data);
this.data を削除します。
}
}
this.afterRender(this.container);
if(this.hidden){
this.doHide();
}
if(this.disabled){
this.disable(true);
}
if(this.stateful !== false){
this.initStateEvents();
}
this.fireEvent('afterrender', this);
}
これを返します;
}

render メソッドを参照してください、来比较坂、仔细阅读下、これも太难ではなく、主に DOM ポイント設定クラスであり、可用性があり、onRender メソッドでこのアセンブリを生成します
にある の applyTo と renderTo の理解と思考 で示されている el 構成プロパティ、私が extjs の文章を公開しているこれは、唯一の参照プロパティです。ただし、通常は手動設定を必要としないメソッドがあり、以下はパネルのパブリック プロパティのテキスト翻訳です:

el : Ext.Element

このコンポーネントをカプセル化する Ext.Element。読み取り専用。

これは通常

になります。要素はクラスの onRender メソッドによって作成されますが、<a href="http://www.extjs.com/output/Ext.Component.html#Ext.Component-autoEl"><font face="NSimsun" color="#0000ff">autoEl<code><a href="http://www.extjs.com/output/Ext.Component.html#Ext.Component-autoEl"><font face="NSimsun" color="#0000ff">autoEl</font></a>

構成

注

: この要素は、このコンポーネントがレンダリングされるまで使用できません。

この文書に記載されているのは以前のバージョンの extjs であると考えられています。el は extjs コンポーネントを包含する DOM ポイントの 1 つであり、通常は extjs によって生成され、適切な細胞膜のようなものです。このコンポーネントは完全ではなく、不正である可能性があります。ただし、render メソッド内のコンテナ (つまり、applyTo で指定された要素の親要素、renderTo で指定された要素) は、そのコンポーネントの親要素であり、このコンテナ内で他の html 要素または extjs コンポーネントが含まれます。

上で説明したように、applyTo と renderTo にはメイン領域はなく、レンダリングの位置が異なるだけです。