[Ext JS 4]contentEL,renderTo,applyToの解釈と区別
3383 ワード
前言
よくcontentEL、renderTo、applyToを使用してHTML要素やExt JSコンポーネントを追加しますが、これらの間にはどのような関係がありますか.なぜExt JSはこれらの異なる方法を提供しますか.
公式解釈
ContentEL
Ext.AbstractComponentというクラスからこの構成があります.
既存のHTML要素、またはその要素のidをコンポーネントの内容として使用します.(コンポーネントレンダリング後に追加)
次の点に注意してください.
renderイベントがトリガーされたとき、ドキュメントにはこの要素が見つかりません.このHTML要素は、コンポーネントが使用するレイアウトスキームには関与しません.
パネルに追加すると短期的に点滅しないように、x-hiddenまたはx-hide-displayのCSSクラスを追加するのが望ましい.
renderTo
Ext.AbstractComponentというクラスからこの構成があります.
コンポーネントがレンダリングする要素のidまたはDOM要素を指定します.
注意:
このコンポーネントがコンテナのサブアイテムになる場合は、この構成オプションを使用しないでください.コンテナのレイアウトマネージャのレンダリングとサブアイテムの管理を担当しているためです.
この構成ではrender()を呼び出す必要はありません.
ContentEl VS renderTo
この2つの比較性は強くありません.使用目的が全く異なるからです.
contentElはExtのコンポーネントにHTMLを挿入する要素です.renderToはHTMLの要素にExtを挿入するコンポーネントである.
したがって、この2つの構成に強制的に使用することもできます.
ここでidがcontentの内容をcontent-divの下に移動するので、ここに移動の操作があることに注意してください.
applyTo VS renderTo
実はExt JS 4ではこのコンフィギュレーションオプションはキャンセルされていますが、以前のバージョンとの互換性のために使用できます.使用する効果はまったく同じで、componentで生成されたコンテンツをHTMLの要素に挿入します.例を見てみましょう.
ネット上では両者の使用効果が異なると言われています(componentではコンテンツの配置が異なる)
http://www.cnblogs.com/yinzixin/archive/2010/01/06/1640233.html
しかし、この記事はExt JS 3バージョンを使用しているので、Ext JS 4で統一されているかどうかはわかりません.
よくcontentEL、renderTo、applyToを使用してHTML要素やExt JSコンポーネントを追加しますが、これらの間にはどのような関係がありますか.なぜExt JSはこれらの異なる方法を提供しますか.
公式解釈
ContentEL
Ext.AbstractComponentというクラスからこの構成があります.
既存のHTML要素、またはその要素のidをコンポーネントの内容として使用します.(コンポーネントレンダリング後に追加)
次の点に注意してください.
renderイベントがトリガーされたとき、ドキュメントにはこの要素が見つかりません.このHTML要素は、コンポーネントが使用するレイアウトスキームには関与しません.
パネルに追加すると短期的に点滅しないように、x-hiddenまたはx-hide-displayのCSSクラスを追加するのが望ましい.
renderTo
Ext.AbstractComponentというクラスからこの構成があります.
コンポーネントがレンダリングする要素のidまたはDOM要素を指定します.
注意:
このコンポーネントがコンテナのサブアイテムになる場合は、この構成オプションを使用しないでください.コンテナのレイアウトマネージャのレンダリングとサブアイテムの管理を担当しているためです.
この構成ではrender()を呼び出す必要はありません.
ContentEl VS renderTo
この2つの比較性は強くありません.使用目的が全く異なるからです.
contentElはExtのコンポーネントにHTMLを挿入する要素です.renderToはHTMLの要素にExtを挿入するコンポーネントである.
したがって、この2つの構成に強制的に使用することもできます.
<!--Add by oscar999-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<head>
<title> New Document </title>
<META NAME="Author" CONTENT="oscar999">
<script type="text/javascript" src="extjs/ext-all.js"></script>
<link href="extjs/resources/ext-theme-neptune/ext-theme-neptune-all.css" rel="stylesheet" type="text/css" />
<script>
Ext.onReady(function(){
Ext.create('Ext.panel.Panel', {
title: 'Hello',
width: 200,
html: 'Hello World!',
contentEl: 'content',
renderTo: 'content-div'
});
});
</script>
</head>
<body>
<div id="content">111111</div>
<div id="content-div"></div>
</body>
</html>
ここでidがcontentの内容をcontent-divの下に移動するので、ここに移動の操作があることに注意してください.
applyTo VS renderTo
実はExt JS 4ではこのコンフィギュレーションオプションはキャンセルされていますが、以前のバージョンとの互換性のために使用できます.使用する効果はまったく同じで、componentで生成されたコンテンツをHTMLの要素に挿入します.例を見てみましょう.
<!--Add by oscar999-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<head>
<title> New Document </title>
<META NAME="Author" CONTENT="oscar999">
<script type="text/javascript" src="extjs/ext-all.js"></script>
<link href="extjs/resources/ext-theme-neptune/ext-theme-neptune-all.css" rel="stylesheet" type="text/css" />
<script>
Ext.onReady(function(){
Ext.create('Ext.Button', {
renderTo: 'render-div',
text : 'Click me',
scale : 'large'
});
Ext.create('Ext.Button', {
renderTo: 'apply-div',
text : 'Click me',
scale : 'large'
});
});
</script>
</head>
<body>
<div id="render-div">render-div</div>
<div id="apply-div">apply-div</div>
</body>
</html>ネット上では両者の使用効果が異なると言われています(componentではコンテンツの配置が異なる)
http://www.cnblogs.com/yinzixin/archive/2010/01/06/1640233.html
しかし、この記事はExt JS 3バージョンを使用しているので、Ext JS 4で統一されているかどうかはわかりません.