日記

Elementに対して各役割を覚書

・「renderTo: hoge」
id=hogeのElementに対して描画する

・「contentEl: hoge」
id=hogeのElement内容を使用して描画する

・「id: 'hoge'」
Elementのidを設定、付けなければExtJSにて自動生成

既存や新規のdivに対しExtJS.Componentに変えるには

「renderTo: ‘test’」とElementを指定して新規にComponentを生成する

以下サンプル

Ext.get(document.body).update('<div id="test"></div>');
new Ext.Panel({
	renderTo: 'test',
	width: '200px',
	title: 'My Title',
	html: 'My HTML content'
});

ExtJS2.0の覚書

・ExtJSではExt.get(‘hoge’)でElementを取得できる。

・ExtJSではExt.getCmp(‘hoge’)ではExtで生成されたComponent（Element群）を取得できる。
（PanelなどはExt.getCmpで取得して扱う)

要するにDomそのままのElementかExtJSで拡張されたElement？かの違い
もちろん、後者の方がより多くのプロパティやメソッドがついてくる

同じように

・Ext.ElementのEventではDomのEventのみが扱えるし

・Ext.Componentの場合はExt.Observableで拡張されたEventも使用できる

使い分けるべし！

ExtJS2.0でレイアウトを決めるときに関する覚書
（Containerとしての機能）

・Viewportを使用してレイアウトする場合
メリット
画面全体の制御を簡単に行える

デメリット
document.bodyを基準として使用されてしまうので
画面全体で使用したくないときに問題が発生する

・Panel
メリット
「div」タグなどに関連させて小回りが利く
コンポーネントを配置できる

デメリット
画面全体の制御をさせたい場合は、記述が多くなり制御が面倒になる

本格的にExtJSを使用してアプリを使用する場合は「Viewport」を使用しても良いが
既存のWebにコンポーネントとして追加するのであれば「Panel」をコンテナとして使用したほうが便利である

本日は以上（笑）

分かっているんだけど、稀にやってしまうのがcssファイルにコメントとして「//」を使用して、
うまく動かないことがある。必ず「/**/」にすること！

なんか「//」でも中途半端にコメント化されてるときもあるんだよなぁ～
だから余計に分かりにくい（苦笑）

覚書