Extjs 2.0のコンテナモデル
ここに書くのは初めてかもしれないけど、最近ExtjsというJavaScriptライブラリを結構使っている。
使おうと思って勉強中といったほうが正確かな・・
で、昨日Viewportまわりでハマってしまった。色々ググッたんだけど、日本語ではまだ、なかなか良い情報が不足していて・・ で、今日何気なく1.1から2.0へのマイグレーションガイドをみたら、いい情報が書いてあった。とりあえず、訳してみる。
元ネタは以下：
http://extjs.com/learn/Ext_2_Overview#Layouts
Viewport
The Viewport is a utility container class that automatically renders to the document body and sizes itself to the dimensions of the browser viewport. This is a handy shortcut for creating full-screen applications as browser resizing and layout recalculations are managed for you automatically. Note that the Viewport cannot be rendered to any container other than document.body, and as such, you can only use one Viewport instance per page.
ExtのViewportクラスはdocument bodyを自動的にレンダーして、自分自身をブラウザのviewportの大きさに合わせるユーティリティContainerクラスです。ブラウザのリサイズやレイアウト再計算を自動でやってくれるので、全画面アプリケーションを作る際の便利なショートカットとなります。ただし注意してください。Viewportオブジェクトはdocument.body以外のいかなるcontainerにもレンダーできませんし、それゆえ1ページに1つのインスタンスしか使うことはできません。
うーん。昨日これを読んでいれば、無駄がだいぶ減ったはず。
Viewportたくさん作りまくってたよ。動かないわけだ。
ついでに、他のも訳しておこう
Container
Container is the most basic foundation for any component that will contain other components. It provides the layout and rendering logic needed for handling sizing and nesting of other components, and also provides the basic mechanism for consistently adding components to the container. The Container class should never need to be used directly, but is intended as the base class for all visual container components.
Containerは他の部品（Component）を格納するあらゆる部品の最も基本的な基礎となるもので、レイアウトと他部品のネストやサイズ調整を扱うのに必要な描画ロジックを提供します。また、整合性をもってContainerに部品を追加ための基本的なメカニズムも提供します。Containerクラスは決して直接的に使う必要はなく、全ての視覚的なコンテナ部品の基底クラスとして意図されたものです。
Panel
Panel is the workhorse container in 2.0, and will be what you use for 90% of your layout tasks. At its most basic, a Panel can be a completely non-visual box used for constructing layouts. However, Panel also provides the basic building blocks needed in an application UI window, including bottom and top bars for adding toolbars and menus, a header, footer and body. It also provides built-in expandable and collapsible behavior and tool buttons, as well as pre-built buttons for a variety of other tools. Panels can be easily dropped into any Container or layout, and the layout and rendering logic are completely managed by Ext.
Panelは2.0ではとても働き者なcontainerで、おそらくあなたがしたいレイアウト作業の90％で使うものとなるでしょう。その最も基本にあるのは、レイアウトを構築するにあたって、Panelが完全に非視覚的な箱として振舞うことができることです。しかし一方で、PanelはアプリＵＩウインドウの基本的な構成要素を提供するという側面もあります。その中には、ツールバーやメニューを追加するための上下のバーや、ヘッダ・フッタ・本体といったものも含まれます。また、Panelは開いたり閉じたりするビルトインの振る舞いやツールボタン、また他の多様なツールのためのあらかじめ組み込まれたボタン群も提供します。PanelはあらゆるContainerまたはlayoutの中に簡単にドロップすることができ、そのときのレイアウトや描画ロジックは完全にExtが管理します。
Window
Window is a specialized Panel that also can be floated, minimized/maximized, restored, dragged, etc. It is intended as the foundation class for desktop-like windowed application UIs as can be seen in the Ext Desktop Demo.
Windowは、フロートさせたり、最大化/最小化したり、復元したり、ドラッグしたり、とできるよう機能特化したパネルです。これは、Ext Desktop Demoにみられるようなデスクトップ風ウィンドウアプリケーションＵＩの基礎クラスとして使ってもらうことを意図しています。
うーん。訳してみるもんだ。 なんか良くわかった気がする。
