古籏一浩のJavaScriptラボ ― 第6回

入門Ext JS：デスクトップ風メニューバーを表示しよう

2009年08月11日 15時48分更新

文● 古籏一浩

●サンプル05のソースコード


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>Sample</title>
        <link rel="stylesheet" href="resources/css/ext-all.css" type="text/css" media="all">
        <link rel="stylesheet" href="css/main.css" type="text/css" media="all">
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript" src="js/ext-base.js"></script>
        <script type="text/javascript" src="js/ext-all.js"></script>
        <script type="text/javascript"><!--
            Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';
            Ext.onReady(function(){
                var win = new Ext.Window({
                    title: 'Ext JSウィンドウサンプル',
                    width: 520,
                    height: 480,
                    layout: 'fit',
                    items: {
                            html : '<div id="map_canvas" style="width:100%;height:100%"></div>'
                    },
                    tbar : [
                            { xtype : 'tbbutton',
                                text : '地図の種類',
                                menu : [
                                        { text : '通常の地図',    mapType : google.maps.MapTypeId.ROADMAP,  handler : menuProc },
                                        { text : '航空写真',            mapType : google.maps.MapTypeId.SATELLITE,  handler : menuProc },
                                        { text : '通常＋航空写真',  mapType : google.maps.MapTypeId.HYBRID,  handler : menuProc },
                                        { text : '地形',                mapType : google.maps.MapTypeId.TERRAIN,    handler : menuProc }
                                ]
                            }
                    ]
                });
                win.show();
                // Googleマップ ver 3の表示
                var myPos = new google.maps.LatLng(36, 137);    // 地図の中央座標
                gmap = new google.maps.Map(Ext.getDom('map_canvas'), {
                    zoom : 7, // ズームレベルは17（詳細地図）
                    center : myPos,   // 地図の中央座標
                    mapTypeId : google.maps.MapTypeId.ROADMAP,  // 地図の種類（通常の地図）
                    mapTypeControl : false,   // コントローラーは表示しない
                    noResize : true   // 自動リサイズチェック
                });
                gmap.set_center(myPos);   // 現在地をマップの中心座標に設定
            });
            // 地図の表示形式の切り替え
            function menuProc(obj){
                gmap.set_mapTypeId(obj.mapType);
            }
        // --></script>
    </head>
    <body>
        <h1>Ext JSウィンドウ+マップサンプル</h1>
        <p>ページが読み込まれるとウィンドウ内に地図が表示されます。</p>
    </body>
</html>