Sencha Architect を用いてデザインしていると、ふと迷うことが多々あるが、その一例として、
Viewにおいて「Container」を使うか「FieldContainer」を使うか、というところである。
出力されたDOM構造を見れば一目瞭然ではあるが、参考例としてArchitectにそれぞれのコンポーネントを配置し、描画した例を挙げよう。
おそらく、下記のようになっているはずだ。
Container (374 characters)
FieldContainer (1,117 characters)
|
|
||
「Container」はDIV、SPANタグ。
「FieldContainer」はTABLE、LABEL、DIV、SPANタグ、でそれぞれ異なった描画となる。
初期状態での構成は、明らかに「FieldContainer」の方がコード量が上回っている。文字数にしておよそ3倍である。
最大の問題は、コード量か、読み込み処理速度か、それは別として、それぞれのコンポーネントにclassを別定義した際のデザイン的な取り回しの行いやすさにあるように思える。
デザインは別のスタイルシート（CSS）で行いたい。等の場合にはTABLEタグの厄介さを熟知している必要がありそうだ。
このどちらを選択するかは、あなた次第、制作物の内容次第、ではあるが私の場合は、ほとんどのケースで、「Container」を用いたほうが良かったケースとなった。
「FieldContainer」を多用してから、後戻りしようにも複雑に作りこんでいくと、正直なところ元に戻すのが面倒になってくるのである。
「FieldContainer」を使う場合のメリットを十分に考えた末、適所に用いるのがベストなのは言うまでもないところかと思う。
追記：
ちなみに「FieldContainer」の方であるが、hideLabel プロパティを True（Architectでチェックをつける）にすると、基本表示される「Label:」という文字が消える。
ただし、これを行い、さらにfieldLabelを空にしてもDOM構造からLABELタグが消えることは無かった。
FieldContainer (hideLabel=true, fieldLabel=”)
|
|
期待したかったのは、LABELタグの構造が消えることだったのだが・・・
記事の内容が古くなっているものもあり、適宜アップデートされる場合がございます。