ExtJSにてお手軽にStyleを設定する方法
・「baseCls: 'x-plain'」
スタイルシート内の'x-plain'を使用する
・「defaultType: 'textfield'」
ExtJSで予め決められているComponentMgr Typeによって大雑把に決める
予断だが、Styleの編集はもちろん他にも出来るタイミングはある
また、最終的にはcssを直接編集することでほとんどのLayoutを修正できる。
ExtJSにはTemplateも用意されておりExtensionsでRegstすればDownload可能！
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」をコンテナとして使用したほうが便利である
本日は以上（笑）