2016年2月15日月曜日

GeoExt3-dev 6 - Ext.tree.Panel plus layer legends Example 1

GeoExt3(https://geoext.github.io/geoext3/)の例(Examoles)をみていきます。

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 ファイルの作成
1 NetBeans を起動します。









2 「プロジェクト」ペインでツリーを geoext3proj -> サイト・ルート -> js -> libs -> geoext3-master -> examples -> tree とクリックして展開し tree-legend-simple.html をダブルクリックして開きます。tree-legend-simple.js もダブルクリックして開きます。



3 「新規ファイル」ボタンをクリックします。

4 ステップ「1.ファイル・タイプを選択」の「カテゴリ」で「HTML5」、「ファイルタイプ」で「HTMLファイル」を選択して「次>」ボタンをクリックします。






5 「new HTML ファイル」ダイアログで「ファイル名」を「6-geoext3」と入力して「終了」ボタンをクリックします。







保存フォルダを変更するときは、「フォルダ」右の「参照」ボタンをクリックして「フォルダを参照」で「geoext3proj-サイト・ルート」をクリックして選択し「フォルダを選択」ボタンをクリックします。









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 件のコメント: