9-2 JavaScript ファイルの作成
「grid.js（9-geoext3.js）」は、マップを表示するための JavaScript ファイルです。
「9-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]）
*/
'Ext.container.Container',
/** Ext.container.Container
* Base class for any Ext.Component that may contain other
* Components. Containers handle the basic behavior of
* containing items, namely adding, inserting and removing
* items.
* The most commonly used Container classes are
* Ext.panel.Panel, Ext.window.Window and Ext.tab.Panel.
* If you do not need the capabilities offered by the
* aforementioned classes you can create a lightweight
* Container to be encapsulated by an HTML element to your
* specifications by using the autoEl config option.
* 他の Component を含むことができる任意の Ext.Component の
* 基本クラス。コンテナ（Container）は、items（アイテム）を
* 含む基本的な動作、すなわち、items（アイテム）を追加、挿入、
* 削除すること、を処理します。
* 最も一般的に使用される Container クラスは Ext.panel.Panel、
* Ext.window.Window と Ext.tab.Panel です。上記のクラスに
* よって提供される機能が必要ない場合は、autoEl 設定オプショ
* ンを使用して、にHTML要素によってカプセル化される軽量のコン
* テナを独自に作成することができます。
* （GeoExt doc[w/ext]）
*/
'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]）
*/
'Ext.grid.Panel',
/** Ext.grid.Pane
* Grids are an excellent way of showing large amounts of
* tabular data on the client side. Essentially a
* supercharged <table>, GridPanel makes it easy to fetch,
* sort and filter large amounts of data.
* Grids are composed of two main pieces - a Store full of
* data and a set of columns to render.
* grid（グリッド）は、クライアント側で大量の表データを示すた
* めの優れた方法です。基本的に過給された <table> は、
* GridPanelは、大量のデータを簡単にフェッチ、並べ替え、および
* フィルタリングすることができます。
* grid は、 2つの主要部品 - データの完全な保存とレンダリング
* する列のセット - で構成されています。
* （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.Features',
/** GeoExt.data.store.Features
* A data store holding OpenLayers feature objects
* (ol.Feature).
* OpenLayers feature オブジェクトを保持するデータストア
* (ol.Feature)。
* （GeoExt doc[w/ext]）
*/
'GeoExt.grid.column.Symbolizer'
/** GeoExt.grid.column.Symbolizer
* An Ext.grid.column.Column pre-configured with a
* GeoExt.FeatureRenderer. This can be used to display the
* rendering style of a vector feature in a grid column.
* GeoExt.FeatureRenderer を使用して事前に設定された
* Ext.grid.column.Column。これは、グリッドカラムにベクタ
* フィーチャのレンダリングスタイルを表示するために使用されま
* す。
* （GeoExt doc[w/ext]）
*/
]);
var olMap, gridWest, gridEast, featStore1, featStore2;
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: 'FeatureGrids',
/** 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 geojson1 = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"city": "Hamburg",
"pop": 1700000
},
"geometry": {
"type": "Point",
"coordinates": [
10.107421874999998,
53.527247970102465
]
}
},
{
"type": "Feature",
"properties": {
"city": "Frankfurt / Main",
"pop": 700000
},
"geometry": {
"type": "Point",
"coordinates": [
8.76708984375,
50.064191736659104
]
}
},
{
"type": "Feature",
"properties": {
"city": "Berlin",
"pop": 3500000
},
"geometry": {
"type": "Point",
"coordinates": [
13.447265624999998,
52.53627304145948
]
}
},
{
"type": "Feature",
"properties": {
"city": "München",
"pop": 1400000
},
"geometry": {
"type": "Point",
"coordinates": [
11.6455078125,
48.1367666796927
]
}
}
]
};
var geojson2 = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"city": "Dortmund"
},
"geometry": {
"type": "Point",
"coordinates": [
7.481689453125,
51.49506473014368
]
}
},
{
"type": "Feature",
"properties": {
"city": "Köln"
},
"geometry": {
"type": "Point",
"coordinates": [
6.976318359375,
50.93073802371819
]
}
},
{
"type": "Feature",
"properties": {
"city": "Kaiserslautern"
},
"geometry": {
"type": "Point",
"coordinates": [
7.7838134765625,
49.44670029695474
]
}
},
{
"type": "Feature",
"properties": {
"city": "Bonn"
},
"geometry": {
"type": "Point",
"coordinates": [
7.102661132812499,
50.74688365485319
]
}
},
{
"type": "Feature",
"properties": {
"city": "Stuttgart"
},
"geometry": {
"type": "Point",
"coordinates": [
9.1461181640625,
48.77429274267509
]
}
}
]
};
// style objects
var blueStyle = new ol.style.Style({
/** ol.style.Style
* Container for vector feature rendering styles. Any
* changes made to the style or its children through
* set*() methods will not take effect until the
* feature or layer that uses the style is re-rendered.
* ベクタフィーチャがスタイルを描画するためのコンテナ。
* スタイルや set*() メソッドを通じてその子に加えられた変
* 更は、スタイルを使用するフィーチャまたはレイヤが再レン
* ダリングされるまで有効になりません。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
image: new ol.style.Circle({
/** ol.style.Circle
* Set circle style for vector features.
* ベクタフィーチャの円のスタイルを設定。（ol3 API）
*/
radius: 6,
fill: new ol.style.Fill({
/** ol.style.Fill
* Set fill style for vector features.
* ベクタフィーチャの塗りつぶしスタイルを設定。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
color: '#0099CC'
}),
stroke: new ol.style.Stroke({
/** ol.style.Stroke
* Set stroke style for vector features.
* Note that the defaults given are the Canvas defaults,
* which will be used if option is not defined.
* The get functions return whatever was entered
* in the options; they will not return the default.
* ベクタフィーチャのためのストロークスタイルの設定。
* デフォルトは、オプションが定義されていない場合に使用さ
* れる Canvas のデフォルトを与えられることに注意してくだ
* さい。GET 関数は、オプションで入力されたものはすべて返
* す。それらはデフォルトを返しません。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
color: '#fff',
width: 2
})
})
});
var redStyle = new ol.style.Style({
image: new ol.style.Circle({
radius: 6,
fill: new ol.style.Fill({
color: '#8B0000'
}),
stroke: new ol.style.Stroke({
color: '#fff',
width: 2
})
})
});
var selectStyle = new ol.style.Style({
image: new ol.style.Circle({
radius: 6,
fill: new ol.style.Fill({
color: '#EE0000'
}),
stroke: new ol.style.Stroke({
color: 'gray',
width: 3
})
})
});
// create a feature collection in order to put into a
// feature store
//フィーチャストアに置くためにフィーチャコレクションを作成
//します。
var vectorSource = new ol.source.Vector({
/** ol.source.Vector
* Provides a source of features for vector layers.
* Vector features provided by this source are
* suitable for editing. See ol.source.VectorTile for
* vector data that is optimized for rendering.
* ベクタレイヤのフィーチャのソースを用意します。このソース
* が提供するベクタフィーチャは、編集に適しています。レンダ
* リングのために最適化されたベクタデータの
* ol.source.VectorTile を参照してください。（ol3 API）
*/
features: (new ol.format.GeoJSON()).readFeatures(geojson1, {
/** ol.format.GeoJSON
* Feature format for reading and writing data in the
* GeoJSON format.
* GeoJSON フォーマットのデータを読み書きするためのフィー
* チャフォーマット。（ol3 API）
*/
/** readFeatures(source, opt_options)
* Read all features from a GeoJSON source.
* Works with both Feature and FeatureCollection
* sources.
* GeoJSON ソースからすべてのフィーチャを読み取ります。
* フィーチャとフィーチャコレクションソースの両方で動作し
* ます。
* （ol3 API）
*/
dataProjection: 'EPSG:4326',
/** dataProjection:
* Projection of the data we are reading. If not
* provided, the projection will be derived from the
* data (where possible) or the defaultDataProjection
* of the format is assigned (where set). If the
* projection can not be derived from the data and if
* no defaultDataProjection is set for a format, the
* features will not be reprojected.
* 読み込んでいるデータの投影。提供されていない場合は、
* 投影は、データ（可能な場合）または、割り当てられた
* フォーマットの defaultDataProjection （設定されてい
* る場合）が導き出されます。投影がデータから導き出され
* ることができない場合、そして、defaultDataProjection
* がフォーマットに対して設定されていない場合、フィーチャ
* は再投影されることはありません。（ol3 API）
*/
featureProjection: 'EPSG:3857'
/** featureProjection:
* Projection of the feature geometries created by the
* format reader. If not provided, features will be
* returned in the dataProjection.
* フォーマットリーダによって作成されたフィーチャジオメト
* リの投影。提供されていない場合、フィーチャは、
* dataProjection で返されます。（ol3 API）
*/
})
});
var featColl = new ol.Collection(vectorSource.getFeatures());
/** ol.Collection
* An expanded version of standard JS Array, adding
* convenience methods for manipulation. Add and remove
* changes to the Collection trigger a Collection event.
* Note that this does not cover changes to the objects
* within the Collection; they trigger events on the
* appropriate object, not on the Collection as a whole.
* 標準 JS Array の拡張バージョン、操作のための便利なメソッド
* を追加します。Collection イベントを Collection トリガへ変
* 更することを追加、削除します。これは Collection 内のオブ
* ジェクトへの変更をカバーしていないことに注意してください。
* それらは適切なオブジェクトにイベントをトリガし、Collection
* 全体にはしません。（ol3 API）
*/
/** getFeatures()
* Get all features on the source.
* ソース上の不すべてのフィーチャを取得します。
* （ol3 API）
*/
// loading data via into ol source and create a vector
// layer to bind a vector layer to a feature store
// ol.source を経由してデータをロードし、ベクタレイヤを
// フィーチャストアに結合するためのベクタレイヤを作成します。
var vectorLayer = new ol.layer.Vector({
/** ol.layer.Vector
* Vector data that is rendered client-side.
* クライアント側で描画されるベクタデータ。（ol3 API）
*/
source: new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(geojson2, {
dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:3857'
})
}),
style: redStyle
});
olMap = new ol.Map({
layers: [
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: new ol.source.TileWMS({
/** ol.source.TileWMS
* Layer source for tile data from WMS servers.
* WMS サーバからのタイルデータのレイヤソース。
* （ol3 API）
*/
url: 'http://ows.terrestris.de/osm-gray/service',
params: {'LAYERS': 'OSM-WMS', 'TILED': true}
})
}),
vectorLayer
],
view: new ol.View({
center: ol.proj.fromLonLat([8, 50]),
/** ol.proj.fromLonLat(coordinate, opt_projection)
* Transforms a coordinate from longitude/latitude to a
* different projection.
* 緯度/経度座標から異なる投影に変換します。（ol3 API）
*/
zoom: 5
})
});
// create feature store by passing a feature collection
// フィーチャコレクションを渡すことによって、フィーチャスト
// アを作成します。
featStore1 = Ext.create('GeoExt.data.store.Features', {
/** 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）
*/
features: featColl,
/** features : ol.Collection
* Initial set of features. Has to be an ol.Collection
* object with ol.Feature objects in it.
* フィーチャの初期セット。その中で ol.Feature オブジェク
* トと ol.Collection オブジェクトである必要があります。
* （GeoExt doc[w/ext）
*/
map: olMap,
/** map : ol.Map
* A map object to which a possible layer will be added.
* 可能なレイヤが追加されるマップオブジェクト。
* （GeoExt doc[w/ext）
*/
createLayer: true,
/** createLayer : Boolean
* Setting this flag to true will create a vector layer
* with the given features and adds it to the given map
* (if available).
* Defaults to: false
* このフラグを true に設定すると、指定したfフィーチャを備え
* たベクトルレイヤを作成し、（可能なら）それを指定されたマッ
* プに追加します。
* デフォルトは：false。（GeoExt doc[w/ext）
*/
style: blueStyle
/** style : ol.Style
* An OpenLayers 3 style object to style the vector layer
* representing the features of this store.
* このストアのフィーチャを表すベクトルレイヤのスタイルを設定
* する OpenLayers 3 スタイルオブジェクト。
* （GeoExt doc[w/ext）
*/
});
// create feature store by passing a vector layer
// ベクタレイヤを通すことによってフィーチャストアを作成
featStore2 = Ext.create('GeoExt.data.store.Features', {
layer: vectorLayer,
/** layer : ol.Layer
* Initial layer holding features which will be added to
* the store.
* ストアに追加されるフィーチャを保持する初期レイヤ。
* （GeoExt doc[w/ext）
*/
map: olMap
});
// default feature grid
gridWest = Ext.create('Ext.grid.Panel', {
/** Ext.grid.Panel
* Grids are an excellent way of showing large amounts of
* tabular data on the client side. Essentially a
* supercharged <table>, GridPanel makes it easy to fetch,
* sort and filter large amounts of data.
* グリッドは、クライアント側で表形式の大量のデータを示すための
* 優れた方法です。基本的にあふれるほどの <table> に、グリッド
* パネルは、大量のデータを簡単に読み込み、ソート、および、フィ
* ルタリングすることができます。
* （GeoExt doc[w/ext）
*/
title: 'Feature Grid',
/** title : String
* The title text to be used to display in the Panel
* Header. Or a config object for a Panel Title. When
* a title is specified the Ext.panel.Header will
* automatically be created and displayed unless header
* is set to false.
* Panel Header に表示するために使用される title テキスト。
* または Panel Title のための config オブジェクト。タイト
* ルが指定されている場合、ヘッダがfalseに設定されていない限
* り Ext.panel.Headerが自動的に作成され、表示されます。
* （GeoExt doc[w/ext）
*/
border: true,
/** 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
* Overrides: Ext.Component.border
* ゼロ幅の border（境界線）でパネルを描画するため false
* を指定します。
* true として値を残すためには、選択されたテーマ
* $panel-border-width を使用します。
* ネプチューン（Neptune Theme）を使用するか拡張すると
* き、デフォルトは false です。
* デフォルトは：true。
* （GeoExt doc[w/ext）
*/
region: 'west',
/** region : "north"/"south"/"east"/"west"/"center"
* Defines the region inside border layout.
* ボーダレイアウトの内側の領域を定義します。
* Possible values:
* north - Positions component at top.
* south - Positions component at bottom.
* east - Positions component at right.
* west - Positions component at left.
* center - Positions component at the remaining space.
* There must be a component with region: "center" in
* every border layout.
* region でコンポーネント、すべてのボーダレイアウト内の
* 「center」、が存在する必要があります。
* （GeoExt doc[w/ext）
*/
store: featStore1,
/** store : Ext.data.Store/String/Object
* The data source to which the grid / tree is bound.
* Acceptable values for this property are:
* grid / tree がバインドされているデータソース。このプロ
* パティに指定できる値は以下のとおりです。
*
* any Store class / subclass
* an ID of a store
* a Store config object. When passing a config you can
* specify the store type by alias. Passing a config
* object with a store type will dynamically create a
* new store of that type when the grid / tree is
* instantiated.
* 設定を渡すときは、エイリアスによって、ストレージタイプを
* 指定することができます。grid / tree がインスタンス化さ
* れるときにストアタイプでconfigオブジェクトを渡すと、動
* 的にそのタイプの新しいストアを作成します。
* （GeoExt doc[w/ext）
*/
columns: [
/** columns : Ext.grid.column.Column[]/Object
* An array of column definition objects which define all
* columns that appear in this grid. Each column
* definition provides the header text for the column,
* and a definition of where the data for that column
* comes from.
* This can also be a configuration object for a
* HeaderContainer which may override certain default
* configurations if necessary. For example, the special
* layout may be overridden to use a simpler layout, or
* one can set default values shared by all columns:
* このグリッドに表示されるすべてのカラムを定義するカラム定義
* オブジェクトの配列。各カラム定義は、カラムに対してヘッダー
* テキスト、およびそのカラムのデータの発生場所の定義を提供し
* ます。
* これは、必要に応じて、特定のデフォルト設定を上書きすること
* ができる HeaderContainer ための設定オブジェクトにすること
* もできます。例えば、特殊なレイアウト（layout）が簡単なレイ
* アウトを使用するために上書きすることができ、または、すべて
* のカラムによって共有されるデフォルト値を設定することができ
* ます。
* （GeoExt doc[w/ext）
*/
{xtype: 'gx_symbolizercolumn', width: 40},
/** gx_symbolizercolumn
* Alias for GeoExt.grid.column.Symbolizer.
* Defaults to: 'gx_symbolizercolumn'
* （GeoExt doc[w/ext）
*/
/** GeoExt.grid.column.Symbolizer
* An Ext.grid.column.Column pre-configured with a
* GeoExt.FeatureRenderer. This can be used to display
* the rendering style of a vector feature in a grid
* column.
* GeoExt.FeatureRenderer で事前に設定された
* Ext.grid.column.Column 。これは、グリッドカラムにベクタ
* のフィーチャのレンダリングスタイルを表示するために使用で
* きます。
* （GeoExt doc[w/ext）
*/
{text: 'Name', dataIndex: 'city', flex: 1},
/** dataIndex : String
* The name of the field in the grid's
* Ext.data.Store's Ext.data.Model definition from
* which to draw the column's value. Required.
* グリッドのExt.data.Store.のカラムの値を描画する
* Ext.data.Model 定義内のフィールド名。必須。
* （GeoExt doc[w/ext]）
*/
/** 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）
*/
{
text: 'Population',
dataIndex: 'pop',
xtype: 'numbercolumn',
/** numbercolumn（Ext.grid.column.Number）
* Ext.grid.column.Number
* A Column definition class which renders a numeric
* data field according to a format string.
* 書式文字列に従って、数値データフィールドをレンダリン
* グするカラム定義クラス。
* （GeoExt doc[w/ext）
*/
format: '0,000',
/** format : String
* A formatting string as used by Ext.util.Format.number
* to format a numeric value for this Column.
* Defaults to: '0,000.00'
* このカラムの数値をフォーマットするため
* Ext.util.Format.number で使用される書式文字列。
* デフォルト：「0,000.00」
* （GeoExt doc[w/ext）
*/
flex: 1
}
],
width: 250
/** 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）
*/
});
// feature grid with some selection logic
gridEast = Ext.create('Ext.grid.Panel', {
title: 'Feature Grid with selection',
border: true,
region: 'east',
store: featStore2,
columns: [
{xtype: 'gx_symbolizercolumn', width: 40},
{text: 'Name', dataIndex: 'city', flex: 2}
],
width: 250,
listeners: {
/** listeners : Object
* A config object containing one or more event handlers
* to be added to this object during initialization. This
* should be a valid listeners config object as specified
* in the addListener example for attaching multiple
* handlers at once.
* 初期化中にこのオブジェクトに追加される、1つまたは複数の
* イベントハンドラを含む設定オブジェクト。これは、一度に
* 複数のハンドラを取り付ける addListener の例で指定され
* た有効なリスナ設定オブジェクトである必要があります。
* （GeoExt doc[w/ext）
*/
'selectionchange': function(grid, selected) {
// reset all selections
featStore2.each(function(rec) {
/**.each( function )
* Iterate over a jQuery object, executing a function
* for each matched element.
* 一致する各要素に対して関数を実行し、jQueryオブジェク
* トを反復処理します。
* （jQuery[http://api.jquery.com/each/]）
*/
rec.getFeature().setStyle(redStyle);
/** getFeatures()
* Get the selected features.
* 選択されたフィーチャを取得します。
* Return: Features collection（ol3 API）
*/
/** setStyle(style)
* Set the style for the feature. This can be a single
* style object, an array of styles, or a function
* that takes a resolution and returns an array of
* styles. If it is null the feature has no style (a
* null style).
* フィーチャのスタイルを設定します。これは、単一のスタイ
* ルオブジェクト、スタイルの配列、または解像度をとり、ス
* タイルの配列を返す関数とすることができます。null の場
* 合、フィーチャは、スタイルなし（null のスタイル）を持
* ちます。（ol3 API）
*/
});
// highlight grid selection in map
Ext.each(selected, function(rec) {
/** each( iterable, fn, [scope], [reverse] ) : Boolean
* Iterates an array or an iterable value and invoke
* the given callback function for each item.
* 配列または反復可能オブジェクトの値を反復処理し、各項
* 目に与えられたコールバック関数を呼び出します。
* （GeoExt doc[w/ext）
*/
rec.getFeature().setStyle(selectStyle);
});
}
}
});
var mapComponent = Ext.create('GeoExt.component.Map', {
map: olMap
});
var mapPanel = Ext.create('Ext.panel.Panel', {
region: 'center',
height: 400,
/** 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）
*/
layout: 'fit',
/** layout
* By default, a lockable grid uses an HBox layout to
* arrange the two grids (possibly separated by a
* splitter).
* Using this config it is possible to specify a
* different layout to arrange the two grids.
* Defaults to: 'fit'
* Overrides: Ext.grid.locking.Lockable.layout
* デフォルトでは、ロック可能なグリッドは（おそらくスプリッ
* タで分離された）2つのグリッドを配置するのHBoxレイアウトを
* 使用しています。
* この設定を使用すると、2つのグリッドを配置する別のレイアウ
* トを指定することが可能です。
* デフォルト："fit"
* オーバーライド：Ext.grid.locking.Lockable.layout
* （GeoExt doc[w/ext）
*/
items: [mapComponent]
/** 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）
*/
});
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）
*/
region: 'south',
title: 'Description',
height: 180,
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）
*/
autoScroll: true
/** autoScroll : Booleandeprecated
* This cfg has been deprected since 5.1.0
* Use scrollable instead
*/
});
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',
/** 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: [mapPanel, gridWest, gridEast, description]
});
}
});
