「panel.js（5-geoext3.js）」は、マップを表示するための JavaScript ファイルです。
「5-geoext3.js」
Ext.require([ /** require( expressions, [fn], [scope] ) * Loads all classes by the given names and all their * direct dependencies; optionally executes the given * callback function when finishes, within the optional * scope. * 指定された名前とそのすべての直接依存によって、すべて * のクラスをロードします。任意の範囲内で、終了するとき * に任意で与えられたコールバック関数を実行します。 * （GeoExt doc[w/ext]） */
'GeoExt.component.Map', /** GeoExt.component.Map * The map component and a panel side by side * map component（マップコンポーネント）とパネルの位置関 * 係（並び）。 * （GeoExt doc[w/ext]） */
'GeoExt.data.store.LayersTree' /** GeoExt.data.store.LayersTree * A store that is synchronized with a * GeoExt.data.store.Layers. It can be used by an * Ext.tree.Panel. * GeoExt.data.store.Layers と同期される store。これは * Ext.tree.Panel によって使用することができます。 * （GeoExt doc[w/ext]） */
]);
var mapComponent, mapPanel, treePanel;
Ext.application({
/** Ext.app.Application
* Represents an Ext JS application, which is typically
* a single page app using a Viewport.
* An application consists of one or more Views. The
* behavior of a View is managed by its corresponding
* ViewController and ViewModel.
* Global activities are coordinated by Controllers
* which are ultimately instantiated by an instance
* of this (or a derived) class.
* 通常、ビューポートを使用して1つのページの app である
* ExtJS アプリケーションを表します。
* アプリケーションは、1つまたは複数の View で構成されて
* います。View の動作は、その対応する ViewController
* と ViewModel によって管理されます。
* グローバルな動作は、このインスタンス（または派生）
* クラスで最終的にインスタンス化されている Controller
* によって調整されます。（GeoExt doc[w/ext]）
*/
name: 'BasicTree', /** name : String * The name of your application. This will also be the * namespace for your views, controllers models and * stores. Don't use spaces or special characters in * the name. Application name is mandatory. * アプリケーションの名前。これはまた、views、controllers * models と stores の名前空間になります。name には * スペースや特殊文字を使用しないでください。アプリケー * ション名は必須です。初期値は、''。 * （GeoExt doc[w/ext]） */
launch: function(){
/** launch( profile ) : Booleantemplate
* Called automatically when the page has completely
* loaded. This is an empty function that should be
* overridden by each application that needs to take
* action on page load.
* ページが完全にロードされたときに自動的に呼び出されます。
* これは、ページのロード時にアクションを実行する必要があ
* る各アプリケーションによって上書きされなければならない
* 空の関数です。（GeoExt doc[w/ext]）
*/
var source1, source2, source3, layer1, layer2, layer3, group, olMap, treeStore;
source1 = new ol.source.MapQuest({layer: 'sat'});
/** ol.source.MapQuest
* Layer source for the MapQuest tile server.
* MapQuest タイルサーバのレイヤソース。（ol3 API
* 2 - ol3ex 23b - MapQuest example 2 参照）
*/
layer1 = new ol.layer.Tile({
/** ol.layer.Tile
* For layer sources that provide pre-rendered, tiled
* images in grids that are organized by zoom levels
* for specific resolutions.
* プリレンダリング（事前描画）を提供するレイヤソースの
* ための、特定の解像度でのズームレベルによって編成され
* ているグリッドのタイルイメージ。（ol3 API）
*/
source: source1, name: 'MapQuest Satellite' });
source2 = new ol.source.MapQuest({layer: 'osm'});
layer2 = new ol.layer.Tile({
source: source2,
name: 'MapQuest OSM'
});
source3 = new ol.source.MapQuest({layer: 'hyb'});
layer3 = new ol.layer.Tile({
source: source3,
name: 'MapQuest Hybrid',
visible: false
});
group = new ol.layer.Group({
/** ol.layer.Group
* A ol.Collection of layers that are handled together.
* A generic change event is triggered when the
* group/Collection changes.
* 同時に扱うレイヤの ol.Collection
* 一般的な change イベントは、グループ/コレクションを変更
* するときトリガされます。（ol3 API）
*/
layers: [layer1, layer2], visible: true });
olMap = new ol.Map({
layers: [group, layer3],
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
mapComponent = Ext.create('GeoExt.component.Map', {
/** create( [name], [args] ) : Object
* Instantiate a class by either full name, alias or
* alternate name.
* If Ext.Loader is enabled and the class has not been
* defined yet, it will attempt to load the class via
* synchronous loading.
* 完全な名前、別名または代替名のいずれかによってクラスを
* インスタンス化します。
* Ext.Loader が有効になっており、クラスがまだ定義されて
* いない場合は、同期ロードを経由してクラスをロードしよう
* とします。（GeoExt doc[w/ext）
*/
map: olMap
/** map : ol.Map
* A configured map or a configuration object for the
* map constructor.
* 設定されたマップまたは map（マップ）コンストラクタの
* 設定オブジェクト。
*/
});
mapPanel = Ext.create('Ext.panel.Panel', {
/** Ext.panel.Panel
* Panel is a container that has specific functionality
* and structural components that make it the perfect
* building block for application-oriented user interfaces.
* Panels are, by virtue of their inheritance from
* Ext.container.Container, capable of being configured
* with a layout, and containing child Components.
* パネルは、特定の機能とそれアプリケーション指向のユーザ
* インターフェイスに最適なビルディングブロックにする構造
* 的要素を持っているコンテナです。パネルは、
* Ext.container.Container からの継承のおかげで、layout
* で構成し、子コンポーネントを含むことができます。
* （GeoExt doc[w/ext]）
*/
region: 'center',
/** region : "north"/"south"/"east"/"west"/"center"
* Defines the region inside border layout.
* ボーダレイアウトの内側の領域を定義します。
* （GeoExt doc[w/ext）
*/
border: false, /** border : Boolean * Specify as false to render the Panel with zero width * borders. * Leaving the value as true uses the selected theme's * $panel-border-width. * Defaults to false when using or extending Neptune. * Defaults to: true. * ゼロ幅の border（境界線）でパネルを描画するため false * を指定します。 * true として値を残すためには、選択されたテーマ * $panel-border-width を使用します。 * ネプチューン（Neptune Theme）を使用するか拡張すると * き、デフォルトは false です。 * デフォルトは：true。 * （GeoExt doc[w/ext） */
layout: 'fit', /** layout : Ext.enums.Layout/Object * Important: In order for child items to be correctly * sized and positioned, typically a layout manager must * be specified through the layout configuration option. * The sizing and positioning of child items is the * responsibility of the Container's layout manager * which creates and manages the type of layout you have * in mind. * 重要：子アイテムが正しいサイズと配置されるためには、 * 一般的にレイアウトマネージャは、layout configuration * option（レイアウト設定オプション）を使用して指定する * 必要があります。 * 子アイテムのサイズと位置は、レイアウトの種類を管理す * るContainer's layout manager（コンテナレイアウトマ * ネージャ）の役割です。 * （GeoExt doc[w/ext） */
items: [mapComponent] /** items : Object/Object[] * A single item, or an array of child Components to be * added to this container * Unless configured with a layout, a Container simply * renders child Components serially into its * encapsulating element and performs no sizing or * positioning upon them. * 単一の item（アイテム）、または子 Compornents（コン * ポーネント）の配列は、このコンテナに追加します。 * layout（レイアウト）で構成されていない限り、Container * （コンテナ）は単に、子 Compornents（コンポーネント） * をそのカプセル化要素に直列にレンダリングし、それらに * サイズや位置調整も実行しません。 * （GeoExt doc[w/ext） */
});
treeStore = Ext.create('GeoExt.data.store.LayersTree', {
layerGroup: olMap.getLayerGroup(),
/** layerGroup : ol.layer.Group
* The ol.layer.Group that the tree is derived from.
* tree から得られるol.layer.Group。
* （GeoExt doc[w/ext）
*/
/** getLayerGroup() * Get the layergroup associated with this map. * この map に関連付けられている layergroup を取得します。 * （ol3 API） */
});
treePanel = Ext.create('Ext.tree.Panel', {
title: 'Tree Example',
/** title : String
* The title text to be used to display in the Panel
* Header. Or a config object for a Panel Title.
* Panel Header に表示するために使用される title テキ
* スト。または Panel Title のための config オブジェ
* クト。（GeoExt doc[w/ext）
*/
viewConfig: {
/** viewConfig : Object
* A config object that will be applied to the grid's UI
* view. Any of the config options available for Ext.view.
* Table can be specified here. This option is ignored if
* view is specified.
* グリッド UI viewに適用される設定オブジェクト。
* Ext.view.Table ために利用可能な設定オプションのいずれかを
* ここで指定することができます。view が指定されている場合、
* このオプションは無視されます。
* （GeoExt doc[w/ext）
*/
plugins: { ptype: 'treeviewdragdrop' }
/** plugins : Ext.plugin.Abstract[]/Ext.plugin.Abstract/
* Object[]/Object/Ext.enums.Plugin[]/Ext.enums.Plugin
* An array of plugins to be added to this component.
* Can also be just a single plugin instead of array.
* Plugins provide custom functionality for a component.
* The only requirement for a valid plugin is that it
* contain an init method that accepts a reference of
* type Ext.Component. When a component is created, if
* any plugins are available, the component will call
* the init method on each plugin, passing a reference
* to itself. Each plugin can then call methods or
* respond to events on the component as needed to
* provide its functionality.
* このコンポーネントに追加されるプラグインの配列。配列の
* 代わりに1つだけのプラグインにすることもできます。
* プラグインは、コンポーネントのカスタム機能を提供します。
* 有効なプラグインの唯一の要件は、それが参照型
* Ext.Component を受け入れる init メソッドが含まれているこ
* とです。コンポーネントが作成されると、任意のプラグインが
* 利用可能である場合、コンポーネントは、それ自身への参照を
* 渡し、各プラグインに init メソッドを呼び出します。各プラ
* グインは、その後、メソッドを呼び出したり、その機能を提供
* するために、必要に応じてコンポーネント上のイベントに応答
* することができます。
* （GeoExt doc[w/ext）
*/
},
store: treeStore, /** store : Ext.data.TreeStore required * The Store the tree should use as its data source. * Overrides: Ext.panel.Table.store * tree がそのデータソースとして使用する Store。 * （GeoExt doc[w/ext） */
rootVisible: false, /** rootVisible : Boolean * False to hide the root node. * Note that trees always have a root node. If you do not * specify a root node, one will be created. * If the root node is not visible, then in order for a * tree to appear to the end user, the root node is * autoloaded with its child nodes. * Defaults to: true. * ルートノードを非表示にする場合は False。 * tree は常にルートノードを持っていることに注意してください。 * ルートノードを指定しない場合、1つ作成されます。 * ルートノードが表示されていない場合、tree は、エンドユーザ * に表示されるようにするために、ルートノードは、その子ノード * に自動的にロードされます。 * デフォルトは：true。 * （GeoExt doc[w/ext） */
flex: 1, /** flex : Number * Flex may be applied to child items of a box layout * (vbox or hbox). Each child item with a flex property * will fill space (horizontally in hbox, vertically in * vbox) according to that item's relative flex value * compared to the sum of all items with a flex value * specified. * Any child items that have either a flex of 0 or * undefined will not be 'flexed' (the initial size will * not be changed). * flex（フレックス）は、ボックスレイアウト（vbox または * hbox）の子 item（アイテム）に適用することができます。flex * プロパティを持つそれぞれの子 item は、指定された flex 値 * を持つすべての item の合計と比べ、その item の相対的な * flex 値に応じて（vbox に垂直方向、hbox に水平方向）スペー * スを埋めます。 * 0 flex または、未定義のいずれかを持っている任意の子 item * は、「（ウィンドウに合わせて）伸縮」されることはありません * （初期サイズは変更されません）。 * （GeoExt doc[w/ext） */
border: false });
var description = Ext.create('Ext.panel.Panel', {
contentEl: 'description',
/** contentEl : String
* Specify an existing HTML element, or the id of an
* existing HTML element to use as the content for this
* component.
* This config option is used to take an existing HTML
* element and place it in the layout element of a new
* component (it simply moves the specified DOM element
* after the Component is rendered to use as the content.
* 既存のHTMLエレメントを指定するか、既存のHTMLエレメン
* トの id は、このコンポーネントのコンテンツとして使用
* します。
* Component（コンポーネント）が 、content（コンテンツ）
* として使用するためにレンダリングされた後に、この設定オ
* プションは、既存のHTMLエレメントを取得し、新しい
* component（コンポーネント）の layout（レイアウト）エレ
* メントでそれを配置するために使用されます（それは単に指定
* された DOM エレメントを移動させます）。
* （GeoExt doc[w/ext）
*/
title: 'Description',
height: 200, /** height : Number|String * The height of this component. A numeric value will be * interpreted as the number of pixels; a string value * will be treated as a CSS value with units. * このコンポーネントの高さ。数値は、ピクセル数として解釈さ * れます。文字列値が単位で CSS 値として扱われます。 * （GeoExt doc[w/ext） */
border: false,
bodyPadding: 5 /** bodyPadding : Number/String * A shortcut for setting a padding style on the body * element. The value can either be a number to be * applied to all sides, or a normal css string * describing padding. * bodyエレメントにパディングスタイルを設定するための * ショートカット。値は、すべての側面に適用される数字、 * または通常のCSSの文字列記述パディングのいずれかにで * きます。 * （GeoExt doc[w/ext） */
});
Ext.create('Ext.Viewport', {
/** Ext.Viewport (Ext.container.Viewport)
* A specialized container representing the viewable
* application area (the browser viewport).
* The Viewport renders itself to the document body,
* and automatically sizes itself to the size of the
* browser viewport and manages window resizing. There
* may only be one Viewport created in a page.
* 表示可能なアプリケーション領域（ブラウザのビューポート）
* を表す特殊なコンテナ。
* Viewport は、document body にそれ自身をレンダリングし、
* 自動的に自身のサイズをブラウザのビューポートのサイズにし、
* ウィンドウのサイズ変更を管理します。１ページに作成した
* ビューポートは一つだけ設定できます。
* （GeoExt doc[w/ext]）
*/
layout: "border",
items: [
mapPanel,
{
xtype: 'panel',
/** xtype : Ext.enums.Widget
* Note: Only applies to Ext.Component derived classes
* when used as a config in Ext.define.
* This property provides a shorter alternative to
* creating objects than using a full class name. Using
* xtype is the most common way to define component
* instances, especially in a container.
* 注：Ext.define で設定として使用された場合、派生クラスを
* Ext.Component にのみ適用されます。
* このプロパティは、完全なクラス名を使用するよりも、オブ
* ジェクトを作成する短い代替手段を提供します。 xtype を使
* 用することは、特にコンテナで、コンポーネントのインスタン
* スを定義する最も一般的な方法です。
* （GeoExt doc[w/ext]）
*/
region: 'west',
width: 400,
/** width : Number|String
* The width of this component. A numeric value will be
* interpreted as the number of pixels; a string value
* will be treated as a CSS value with units.
* このコンポーネントの幅。数値は、ピクセル数として解釈さ
* れます。文字列値が単位で CSS 値として扱われます。
* （GeoExt doc[w/ext）
*/
layout: {
/** layout [Specify as an Object]
* type
* The layout type to be used for this container. If
* not specified, a default Ext.layout.container.Auto
* will be created and used.
* Valid layout type values are listed in
* Ext.enums.Layout.
* Layout specific configuration properties
* Additional layout specific configuration properties
* may also be specified. For complete details
* regarding the valid config options for each layout
* type, see the layout class corresponding to the type
* specified.
* type（タイプ）
* layout type（レイアウトタイプ）は、この container（コン
* テナ）に使用されます。
* 指定しない場合、デフォルトの Ext.layout.container.Auto
* が作成および使用されます。
* 有効な layout type の値は Ext.enums.Layout に記載され
* ています。
* layout（レイアウト）固有の設定プロパティー
* 追加の layout 固有の構成プロパティを指定することもでき
* ます。各 layout type に有効な設定オプションに関する詳
* 細については、指定された type に対応する layout クラス
* を参照してください。
* （GeoExt doc[w/ext]）
*/
type: 'vbox',
align: 'stretch'
},
items: [
treePanel,
description
]
}
]
});
}
});
0 件のコメント:
コメントを投稿