6 - Ext.tree.Panel plus layer legends Example
「Ext.tree.Panel plus layer legends Example (tree-legend-simple.html)」（「Examples」の「Tree Panel with legends」）を参考に地図を表示してみます。
6-1 HTML ファイルの作成
2 「プロジェクト」ペインでツリーを geoext3proj -> サイト・ルート -> js -> libs -> geoext3-master -> examples -> tree とクリックして展開し tree-legend-simple.html をダブルクリックして開きます。tree-legend-simple.js もダブルクリックして開きます。
3 「新規ファイル」ボタンをクリックします。
6 「tree-legend-simple.html」の内容をコピーして「6-geoext3.html」に貼り付け、修正します。
7 同じように、「新規ファイル」ボタンをクリックし、ステップ「1.ファイル・タイプを選択」の「カテゴリ」で「HTML5」、「ファイルタイプ」で「JavaScriptファイル」をクリックして選択し「次>」ボタンをクリック。「ファイル名」を「6-geoext3」と入力して「終了」ボタンをクリック。「tree-legend-simple.js」の内容をコピーして貼り付け、修正します。
「index.html」
<html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>
<body> <div>TODO write content</div> <div><a href="./3-geoext3.html">3-geoext3.html</a></div> <div><a href="./4-geoext3.html">4-geoext3.html</a></div> <div><a href="./5-geoext3.html">5-geoext3.html</a></div> <div><a href="./6-geoext3.html">6-geoext3.html</a></div> </body> </html>
「6-geoext3.html」
<!DOCTYPE HTML> <html> <head> <meta charset=utf-8" /> <title>Ext.tree.Panel plus layer legends Example</title>
<link rel="stylesheet" type="text/css" href="http://openlayers.org/en/master/css/ol.css" /> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-all.css" />
<style>
.x-grid-rowbody {
padding: 0;
}
.legend {
margin: 3px 0 0 0;
border: 1px solid transparent;
border-radius: 6px;
}
</style>
</head>
<body>
<div id='description'>
<p>This example shows how to use the
<code>Ext.tree.Panel</code> class with a
<code>GeoExt.data.store.LayersTree</code>
and shows two methods how to include legends for every
treenode.</p>
<p>Have a look at
<!-- <a href="tree-legend-simple.js">tree-legend-simple.js</a> -->
<a href="6-geoext3.js">6-geoext3.js</a>
to see how this is done.</p>
</div>
<script src="http://openlayers.org/en/master/build/ol.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script>
Ext.Loader.setConfig({
/** ExtLoader
* This class provides dynamic loading support for
* JavaScript classes. Application code does not
* typically need to call Ext.Loader except perhaps
* to configure path mappings when not using Sencha
* Cmd.
* このクラスは、JavaScript クラスの動的ローディン
* グサポートを提供します。アプリケーションコードは、
* Sencha Cmd を使用しないでパスマッピングを設定する
* 大方の場合以外 通常、Ext.Loader を呼び出す必要は
* ありません。
* （GeoExt doc[w/ext]）
*/
/** setConfig(config)
* Set the configuration for the loader. This should
* be called right after ext-(debug).js is included
* in the page, and before Ext.onReady. i.e:
* ローダの設定を設定します。これは、ext-(debug).js
* がページに読み込まれる後と Ext.onReady の前に正し
* く呼び出さなければなりません。
* （GeoExt doc[w/ext]）
*/
enabled: true,
/** nabled : Boolean
* Whether or not to enable the dynamic dependency
* loading feature. Defaults to: true.
* 動的依存関係のロード機能の有効または無効。
* デフォルト: true
* （GeoExt doc[w/ext]）
*/
paths: {
/** paths : Object
* The mapping from namespaces to file paths.
* Note that all relative paths are relative to the
* current HTML document. If not being specified,
* for example, Other.awesome.Class will simply be
* loaded from "./Other/awesome/Class.js".
* 名前空間からファイルパスへのマッピング。すべて
* の相対パスは、現在のHTMLドキュメントに対して相
* 対的であることに注意してください。指定されてい
* ない場合には、例えば、Other.awesome.Class は単
* に「./Other/awesome/Class.js」からロードされま
* す。
* （GeoExt doc[w/ext]）
*/
// 'GeoExt': '../../src/'
'GeoExt': './js/libs/geoext3-master/src/'
}
});
</script>
<!-- <script src="tree-legend-simple.js"></script> --> <script src="6-geoext3.js"></script>
</body> </html>
0 件のコメント:
コメントを投稿