Webページ全体を構成するか、部品を構成するか

“Ext JS” を使うとなると、掲題の通り、「Webページ全体を構成するか、部品を構成するか」により、構築の仕方が異なってくる。

私の場合、後者の「部品を構築する」 事からの始まりであった。（今思えば、結構難易度は高かったかもしれない）
既にこの時に、Sencha Architect という素晴らしいツールを使うことができた為に余計に混乱した。
部品とは言っても、ある程度まとまった機能を、既存のページにビルトインするような形式である。

既に過去の事ではあるが、最初につまずいた事として　「コンポーネントをどうやって部分的に書き出すか？」 が分からず、試行錯誤した。

通常、SenchaArchitect でアプリケーションを作成した場合、それを描画した結果 </body> の直前に書き出さされてしまう。
あくまでも、「動的」に書き出されるため、HTMLソースコードをプレビューしても表示はされない事は周知の事実であろう。
ChromeではJavaScriptコンソールを使う必要があるが、DOM構造を見るためにそれの「Elements」タブから確認する必要がある。（ブラウザ「Chrome」に描画された対象コンポーネントを右クリック→要求の検証）

これらを見ると、例えば「Container」を一つ、Architect内に配置しただけの場合でも、それなりに複雑なDIVタグ等が描画される。
いわゆる、「ExtJSの仕事」、によって自動的に基本的なHTMLタグ構成が書きだされ描画された結果である。

そもそも、Architectで構成したこれらコンポーネントから、結果としてどのように描画されるかを把握したいところではあるが、それらの解説は飛ばすことにしよう。

結論として、描画したいコンポーネント（ここでは、Containerとしよう）に対して
「autoRender」 プロパティを文字列で設定してあげることで、部分的にビルトインの様な形式で描画することができる。

指定する文字列は、例えば下記のような形式でHTMLタグを書いた箇所のID属性があったとしよう。

<div id="ExtComponent"></div>

この場合、Container.autoRender に設定する値は “ExtComponent” と指定する。
これにより、例えば、上記HTMLタグの前後に何かコンテツがあったとしても、指定のDIVタグにContainerの内容がしっかりと書きだされる。勿論、DOM構造に対して動的ではあるが。

ちなみに、複数のコンポーネントをバラバラに書き出したいという場合にも、widget化した後に、それぞれをlaunch()等で show() もしくは、doAutoRender() することで、好きな箇所にビルトインすることが出来る。ちなみに、launch() は Applicationから自身で新たに生成する必要がある（といっても、ワンクリックするだけ）。 launch() はページが完全にロードされた時に実行されるものである。

一点気をつけなければならないのは、
application.autoCreateViewport
Container.initialView (どうしてか最新HELP無し？）

何れも、false にすることが必須である。
これが Architectでは、初期段階でtrue（チェックされた状態）であるため、自動的にページ全部を構築するのがArchitectを使うときの基本的な使い方となっていそうである。

私のような例として、部品を構成したい場合も多いであろうということで、参考となれば幸いである。