「tree-legend-simple.js（6-geoext3.js）」は、マップを表示するための JavaScript ファイルです。
「6-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]） */
]);
/** * A plugin for Ext.grid.column.Column s that overwrites the * internal cellTpl to support legends. * 凡例をサポートするための内部 cellTpl を上書きする * Ext.grid.column.Column s のプラグイン。 */
/** Ext.grid.column.Column * This class specifies the definition for a column inside a * Ext.grid.Panel. It encompasses both the grid header * configuration as well as displaying data within the grid * itself. If the columns configuration is specified, this * column will become a column group and can contain other * columns inside. In general, this class will not be * created directly, rather an array of column * configurations will be passed to the grid: * このクラスは、Ext.grid.Panel内部のカラムの定義を指定します。 * これは、グリッド自体の中に、表示データと同様にグリッドヘッダ * の構成の両方を含みます。カラムの設定が指定されている場合は、 * このカラムはカラムグループになり、内部に他のカラムを含めるこ * とができます。一般的に、カラム構成の配列がグリッドに渡される * よりもこのクラスは直接作成されません。 * （GeoExt doc[w/ext]） */
Ext.define('BasicTreeColumnLegends', {
/** define( className, data, [createdFn] ) : Ext.Base
* Defines a class or override.
* クラスを定義、または、上書きします。
* （GeoExt doc[w/ext]）
*/
extend: 'Ext.AbstractPlugin', /** extend : String * The parent class that this class extends. * このクラスが拡張する親クラス。 * （GeoExt doc[w/ext]） **/
/** Ext.AbstractPlugin * The AbstractPlugin class is the base class from which * user-implemented plugins should inherit. * AbstractPluginクラスは、ユーザー実装のプラグインが継承する * 基本クラスです。 * （GeoExt doc[w/ext]） */
alias: 'plugin.basic_tree_column_legend', /** alias : String/String[] * List of short aliases for class names. An alias consists * of a namespace and a name concatenated by a period as * <namespace>.<name>. * クラス名の短いエイリアスのリスト。エイリアスは、<namespace> * <name> としてピリオドによって連結された名前空間（namespace） * と名前（name）で構成されます。 * （GeoExt doc[w/ext]） */
/** * @private */
originalCellTpl: Ext.clone(Ext.tree.Column.prototype.cellTpl).join(''),
/** clone( item ) : Object
* Clone simple variables including array, {}-like objects,
* DOM nodes and Date without keeping the old reference. A
* reference for the object itself is returned if it's not
* a direct descendant of Object. For model cloning, see
* Model.copy.
* 古い参照を保持することなく、オブジェクトの様な {} 配列、DOM
* ノードと Date を含む単純変数をクローンします。オブジェクト
* の直接の子孫ではない場合、オブジェクト自体の参照が返されま
* す。モデルクローニングについては、Model.copy を参照してく
* ださい。
* （GeoExt doc[w/ext]）
*/
/** Ext.tree.Column * Provides indentation and folder structure markup for a * Tree taking into account depth and position within the * tree hierarchy. * ツリー階層内のアカウントの深さと位置を考慮して Tree のため * のインデントとフォルダ構造のマークアップを提供します。 * （GeoExt doc[w/ext]） */
/** cellTpl : Arrayprivate * （GeoExt doc[w/ext] を参照してください。） */
/** Array.prototype.join() * join() メソッドは、配列のすべての要素を繋いで文字列にします。 * （MDN[https://developer.mozilla.org/ja/docs/Web/ * JavaScript/Reference/Global_Objects/Array/join]） */
/**
* The Xtemplate strings that will be used instead of the
* plain {value} when rendering.
* レンダリング時に plain {value} の代わりに使用される
* XTemplate 文字列。
*/
valueReplacementTpl: [
'{value}',
'<tpl if="this.hasLegend(values.record)"><br />',
'<tpl for="lines">',
'<img src="{parent.blankUrl}"',
' class="{parent.childCls} {parent.elbowCls}-img ',
'{parent.elbowCls}-<tpl if=".">line<tpl else>empty</tpl>"',
' role="presentation"/>',
'</tpl>',
'<img src="{blankUrl}" class="{childCls} x-tree-elbow-img">',
'<img src="{blankUrl}" class="{childCls} x-tree-elbow-img">',
'<img src="{blankUrl}" class="{childCls} x-tree-elbow-img">',
'{[this.getLegendHtml(values.record)]}',
'</tpl>'
],
/** * The context for methods available in the template * テンプレートで使用可能なメソッドのコンテキスト。 */
valueReplacementContext: {
hasLegend: function(rec){
var isChecked = rec.get('checked');
var layer = rec.data;
return isChecked && !(layer instanceof ol.layer.Group);
/** instanceof
* instanceof 演算子は、オブジェクトが自身のプロトタイプに
* コンストラクタの prototype プロパティを持っているかを確
* 認します。
* （MDN[https://developer.mozilla.org/ja/docs/JavaScript/
* Reference/Operators/instanceof]）
*/
},
getLegendHtml: function(rec){
var layer = rec.data;
var legendUrl = layer.get('legendUrl');
if (!legendUrl) {
legendUrl = "http://geoext.github.io/geoext2/" +
"website-resources/img/GeoExt-logo.png";
}
return '<img class="legend" src="' + legendUrl + '" height="32" />';
}
},
init: function(column){
var me = this;
if(!(column instanceof Ext.grid.column.Column)) {
Ext.log.warn("Plugin shall only be applied to instances of" +
" Ext.grid.column.Column");
/** Ext.log( [options], [message] )
* Logs a message. If a console is present it will be
* used. On Opera, the method "opera.postError" is called.
* In other cases, the message is logged to an array
* "Ext.log.out". An attached debugger can watch this
* array and view the log. The log buffer is limited to a
* maximum of "Ext.log.max" entries (defaults to 250).
* メッセージをログに記録します。コンソールが存在する場合、そ
* れが使用されます。Opera では、メソッド「opera.postError」
* と呼ばれています。他の例では、メッセージは配列
* 「Ext.log.out」に記録されます。添付デバッガはこの配列をみ
* て、ログを表示することができます。ログバッファは
* 「Ext.log.max」のエントリ（デフォルトは 250）の最大値に制
* 限されています。
* （GeoExt doc[w/ext]）
*/
return; }
var valuePlaceHolderRegExp = /\{value\}/g;
var replacementTpl = me.valueReplacementTpl.join('');
var newCellTpl = me.originalCellTpl.replace( /** String.prototype.replace() * replace() メソッドは、pattern にマッチした文字列の一部ま * たは全てを replacement で置き換えた新しい文字列を返します。 * pattern は文字列または RegExp、replacement は文字列また * は各マッチで呼び出される関数です。 * str.replace(pattern, replacement[, flags]) * （MDN[https://developer.mozilla.org/ja/docs/Web/ * JavaScript/Reference/Global_Objects/String/replace]） */
valuePlaceHolderRegExp, replacementTpl ); column.cellTpl = [ newCellTpl, me.valueReplacementContext ]; } });
var mapComponent, mapPanel, treePanel, treePanel2;
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: 'LegendTrees', /** 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, layer4, group, olMap, treeStore, treeStore2;
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）
*/
legendUrl: 'https://otile4-s.mqcdn.com/tiles/1.0.0/sat/4/4/7.jpg', source: source1, name: 'MapQuest Satellite' });
source2 = new ol.source.MapQuest({layer: 'osm'});
layer2 = new ol.layer.Tile({
legendUrl: 'https://otile4-s.mqcdn.com/tiles/1.0.0/osm/4/4/7.jpg',
source: source2,
name: 'MapQuest OSM'
});
source3 = new ol.source.MapQuest({layer: 'hyb'});
layer3 = new ol.layer.Tile({
legendUrl: 'https://otile4-s.mqcdn.com/tiles/1.0.0/hyb/4/4/7.jpg',
source: source3,
name: 'MapQuest Hybrid'
});
layer4 = new ol.layer.Vector({
/** ol.layer.Vector
* Vector data that is rendered client-side.
* クライアント側で描画されたベクタデータ。（ol3 API）
*/
source: new ol.source.Vector(),
/** ol.source.Vector
* Provides a source of features for vector layers.
* ベクタレイヤのフィーチャのソースを用意します。（ol3 API）
*/
name: 'Vector ' });
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]
});
olMap = new ol.Map({
layers: [group, layer3, layer4],
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 });
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）
*/
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）
*/
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）
*/
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', {
/** Ext.tree.Panel
* The TreePanel provides tree-structured UI
* representation of tree-structured data. A TreePanel
* must be bound to a Ext.data.TreeStore.
* TreePanels support multiple columns through the columns
* configuration.
* By default a TreePanel contains a single column which
* uses the text Field of the store's nodes.
* TreePanel は、ツリー構造データのツリー構造 UI 表現を提供
* します。 TreePanel は Ext.data.TreeStore にバインドする
* 必要があります。
* TreePanel は、カラム設定を使用して複数のカラムをサポート
* しています。
* デフォルトでは TreePanel はストアノードのテキストフィール
* ドを使用して単一のカラムを含んでいます。
* （GeoExt doc[w/ext）
*/
title: 'Legends in tree panel',
/** 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）
*/
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）
*/
border: false,
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。
* ツリーは常にルートノードを持っていることに注意してくださ
* い。ルートノードを指定しない場合、1つ作成されます。
* ルートノードが表示されていない場合、ツリーがエンドユーザに
* 表示されるようにするために、ルートノードは、その子ノードと
* 共に自動的にロードされます。
* デフォルトは：true。
* （GeoExt doc[w/ext）
*/
hideHeaders: true,
/** hideHeaders : Boolean
* True to hide the headers.
* Overrides: Ext.panel.Table.hideHeaders
* ヘッダを非表示にするには true。
* 上書きは、Ext.panel.Table.hideHeaders。
* （GeoExt doc[w/ext）
*/
lines: false,
/** lines : Boolean
* False to disable tree lines.
* Defaults to: true
* ツリーラインを無効にする場合は false。
* デフォルトは：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）
*/
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）
*/
header: false,
/** header : Boolean/Object
* Pass as false to prevent a Header from being created
* and shown.
* Pass as a config object (optionally containing an
* xtype) to custom-configure this Panel's header.
* See Ext.panel.Header for all the options that may be
* specified here.
* A panel header is a Ext.container.Container which
* contains the Panel's title and tools. You may also
* configure the Panel's header option with its own
* child items which go before the tools
* By default the panel title is inserted after items
* configured in this config, but before any tools. To
* insert the title at any point in the full array,
* specify the titlePosition config:
* 作成され、表示されることからヘッダを防ぐために false とし
* て渡します。
* カスタム構成のこの Panel ヘッダに設定オブジェクト（オプ
* ション xtype を含む）として渡します。
* ここで指定することができるすべてのオプションに対する
* Ext.panel.Header を参照してください。
* パネル・ヘッダは、Panel のタイトルやツールを含む
* Ext.container.Container です。また、ツールの前に動作する
* その子アイテム（item）で Panel のヘッダオプションを設定す
* ることもできます。
* デフォルトでは、パネルタイトル（panel title）は、この設
* 定で構成されたアイテム（item）の後に挿入されますが、すべ
* てのツールの前です。完全な配列のすべての点でタイトル
* （title）を挿入するには、titlePosition 設定を指定します。
* （GeoExt doc[w/ext）
*/
items: [
{
xtype: 'treecolumn',
/** 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]）
*/
/** treecolumn
* Ext.tree.Column の エイリアス。
*/
dataIndex: 'text',
/** 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: 1,
plugins: [
/** 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）
*/
{
ptype: 'basic_tree_column_legend'
/** ptype:
* プラグインのエイリアス。
*/
}
]
}
]
}
});
treeStore2 = Ext.create('GeoExt.data.store.LayersTree', {
layerGroup: olMap.getLayerGroup()
});
treePanel2 = Ext.create('Ext.tree.Panel', {
title: 'treePanel',
store: treeStore2,
rootVisible: false,
border: false,
flex: 1,
hideHeaders: true,
lines: false,
features: [{
/** features : Ext.grid.feature.Feature[]/Object[]/
* Ext.enums.Feature[]
* An array of grid Features to be added to this grid.
* Can also be just a single feature instead of array.
* このグリッドに追加されるグリッド Feature の配列。配列の代
* わりに、1つだけの feature にすることもできます。
* （GeoExt doc[w/ext）
*/
ftype: 'rowbody',
/** ftype:
* feature のエイリアス。
*/
/** rowbody
* Ext.grid.feature.RowBody のエイリアス。
* Ext.grid.feature.RowBody
* The rowbody feature enhances the grid's markup to
* have an additional tr -> td -> div which spans
* the entire width of the original row.
* This is useful to to associate additional information
* with a particular record in a grid.
* Rowbodies are initially hidden unless you override
* setupRowData.
* Will expose additional events on the gridview with
* the prefix of 'rowbody'. For example: 'rowbodyclick',
* 'rowbodydblclick', 'rowbodycontextmenu'.
* rowbody feature は、元の行の幅全体に及ぶ追加の tr ->
* td -> div を持つグリッドのマークアップを強化します。
* これは、グリッド内の特定のレコードに追加情報を関連付け
* るのに有用です。
* setupRowData を上書きしない限り Rowbodiesは、最初は隠
* されています。
* 'rowbody'の接頭辞を持つ gridview に関し て追加のイベン
* トを公開します。 たとえば：'rowbodyclick'、
* ' rowbodydbclick'、'rowbodycontextmenu' です。
* （GeoExt doc[w/ext）
*/
setupRowData: function(rec, rowIndex, rowValues) {
/** setupRowData( record, idx, rowValues )private
* Parameters
* record : Object, idx : Object, rowValues : Object
*/
var headerCt = this.view.headerCt,
colspan = headerCt.getColumnCount(),
/** getColumnCount( )
* Returns the number of grid columns descended from
* this HeaderContainer. Group Columns are
* HeaderContainers. All grid columns are returned,
* including hidden ones.
* この HeaderContainer からの子グリッドカラムの数を返しま
* す。グループカラム（Group Column）は HeaderContainers
* です。すべてのグリッドカラムが非表示のものも含めて、返さ
* れます。
* （GeoExt doc[w/ext）
*/
isChecked = rec.get('checked'),
layer = rec.data,
GrpClass = ol.layer.Group,
hasLegend = isChecked && !(layer instanceof GrpClass),
legendUrl = hasLegend && layer.get('legendUrl'),
legHtml = "";
if (!legendUrl) {
legendUrl = "http://geoext.github.io/geoext2/" +
"website-resources/img/GeoExt-logo.png";
}
legHtml = '<img class="legend" src="' + legendUrl +
'" height="32" />';
//Usually you would style the my-body-class in CSS file
//通常、css ファイルに my-body-class をスタイル設定します。
Ext.apply(rowValues, {
/** Ext.apply ( object, config, [defaults] ) : Object
* Copies all the properties of config to the specified
* object.
* すべての設定のプロパティを指定されたオブジェクトにコピー
* します。
* （GeoExt doc[w/ext）
*/
/** rowValues
* Private properties used during the row and cell
* render process. They are allocated here on the
* prototype, and cleared/re-used to avoid GC churn
* during repeated rendering.
* 行とセルがプロセスをレンダリングする間に使用されるプライ
* ベートプロパティ。それらはプロトタイプでここに割り当てら
* れ、レンダリングを繰り返す間、GC churn を回避するために
* 削除/再使用されます。
* （GeoExt doc[w/ext）
*/
rowBody: hasLegend ? legHtml : "",
/** 条件演算子 condition ? expr1 : expr2
* condition: true か false かを評価する条件文です。
* expr1, expr2: 各々の値の場合に実行する式です。
* condition が true の場合、演算子は expr1 の値を選択し
* ます。そうでない場合は expr2 の値を選択します。
* （MDN[https://developer.mozilla.org/ja/docs/Web/
* JavaScript/Guide/Expressions_and_Operators]）
*/
rowBodyCls: "my-body-class",
/** rowBodyCls:String
* Defaults to: Ext.baseCSSPrefix + 'grid-row-body'
* （GeoExt doc[w/ext）
* baseCSSPrefix : String
* The base prefix to use for all Ext components.
* すべての Ext コンポーネントに使用するベースプレフィッ
* クス。
*/
rowBodyColspan: colspan
});
}
}]
});
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',
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,
treePanel2
]
}
]
});
}
});
0 件のコメント:
コメントを投稿