ホームページ >ウェブフロントエンド >jsチュートリアル >Extjs 研究ノート 5: renderTo と applyTo_extjs の違いの詳細
Extjs 研究ノート 5: renderTo と applyTo_extjs の違いの詳細
- WBOYオリジナル
- 2016-05-16 18:37:071562ブラウズ
ExtJS の renderTo と applyTo の違い
applyTo と renderTo についての理解と考え方
個人的には、これら 2 つの記事は十分に人気がないと思います。最終的にどのようなコードが生成されるかを確認する簡単な例を作成します。
コードをコピーします コードは次のとおりです:
このコードによって生成される HTML は次のとおりです:
applyTo:button の場合、生成されるコードは次のとおりです:
明らかに、簡単に言えば、
内にコンポーネントを追加します。 次に、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 行)、
}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 の文章を公開しているこれは、唯一の参照プロパティです。ただし、通常は手動設定を必要としないメソッドがあり、以下はパネルのパブリック プロパティのテキスト翻訳です:
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 にはメイン領域はなく、レンダリングの位置が異なるだけです。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。