Edit in JSFiddle

/**
 * Copyright (c) 2008-2011 The Open Source Geospatial Foundation
 * 
 * Published under the BSD license. See
 * http://svn.geoext.org/core/trunk/geoext/license.txt for the full text of the
 * license.
 */

/**
 * api: example[mappanel-window] Map Panel (in a Window)
 * ------------------------- Render a map panel in a Window.
 */

/**
 * Improbed by TYS may/2013 see http://blog.godo-tys.jp
 * 
 */

var mapPanel;

Ext.onReady(function () {

    // 座標系の設定
    var epsg4326 = new OpenLayers.Projection("EPSG:4326");
    var epsg3857 = new OpenLayers.Projection("EPSG:3857");

    var map = new OpenLayers.Map({});

    // 電子国土layerの作成
    var webtisLayer = new webtis.Layer.BaseMap("電子国土");
    map.addLayers([webtisLayer]);
    map.displayProjection = epsg4326;

    // openstreetmapの作成
    var osmlayer = new OpenLayers.Layer.OSM("OpenStreetMap")
    map.addLayers([osmlayer]);

    // controlの設定
    map.addControl(new OpenLayers.Control.MousePosition({
        id: "ll_mouse",
        formatOutput: formatLonlats
    }));
    map.addControl(new OpenLayers.Control.ScaleLine());
    // map.addControl(new OpenLayers.Control.LayerSwitcher());
    map.addControl(new OpenLayers.Control.Navigation());

    // 初期状態でoverviewmapを開く
    var overview1 = new OpenLayers.Control.OverviewMap({
        maximized: true
    });
    map.addControl(overview1);

    // 初期状態でlayerswticherを開く
    var switcher1 = new OpenLayers.Control.LayerSwitcher();
    map.addControl(switcher1);
    switcher1.maximizeControl();

    // 初期表示の緯度経度
    map.setCenter(new OpenLayers.LonLat(139.5, 35.5).transform(
    epsg4326, epsg3857), 15);

    var extents = new OpenLayers.Bounds(138.7, 35.06, 140, 35.73)
        .transform(epsg4326, epsg3857);

    var lonlat = new OpenLayers.LonLat(139.5, 35.5);
    lonlat.transform(map.displayProjection, map.baseLayer.projection);

    // 神奈川県の市区町村行政界
    var prefLayer = new OpenLayers.Layer.Vector("行政界", {
        strategies: [new OpenLayers.Strategy.Fixed()],
        protocol: new OpenLayers.Protocol.HTTP({
            url: "http://map.godo-tys.jp/data/c14_region.json",
            format: new OpenLayers.Format.GeoJSON()
        })
    });

    // create select feature control
    var selectCtrl = new OpenLayers.Control.SelectFeature(prefLayer);

    // define "createPopup" function
    function createPopup(feature) {
        var bogusMarkup = '<table>';
        bogusMarkup += '<p>属性値</p>';
        for (var attr in feature.attributes) {
            bogusMarkup += '<tr><td>' + attr + ' : ' + '</td><td>' + feature.attributes[attr] + '</td></tr>';
        }
        bogusMarkup += '</table>';

        popup = new GeoExt.Popup({
            title: 'My Popup',
            location: feature,
            width: 200,
            html: bogusMarkup,
            maximizable: true,
            collapsible: true
        });
        // unselect feature when the popup
        // is closed
        popup.on({
            close: function () {
                if (OpenLayers.Util.indexOf(
                prefLayer.selectedFeatures,
                this.feature) > -1) {
                    selectCtrl.unselect(this.feature);
                }
            }
        });
        popup.show();
    };

    // create popup on "featureselected"
    prefLayer.events.on({
        featureselected: function (e) {
            createPopup(e.feature);
        }
    });

    // 表示するwindowの作成
    var mapwin = new Ext.Window({
        title: "GeoExt Popup Window",
        height: 400,
        width: 500,
        layout: "fit",
        map: map,
        items: [{
            xtype: "gx_mappanel",
            id: "mappanel",
            map: map,
            layers: [osmlayer, webtisLayer, prefLayer],
            extent: extents
        }]
    });

    // mapwinの表示
    mapwin.show();

    mapPanel = mapwin.items.get(0);
    mapPanel.map.addControl(selectCtrl);
    selectCtrl.activate();

    // マウス座標の緯度経度変換
    function formatLonlats(lonLat) {
        var lat = lonLat.lat;
        var long = lonLat.lon;
        var ns = OpenLayers.Util.getFormattedLonLat(lat);
        var ew = OpenLayers.Util.getFormattedLonLat(long, 'lon');
        return ns + ', ' + ew + ' (' + (Math.round(lat * 100000) / 100000) + ', ' + (Math.round(long * 100000) / 100000) + ')';
    }

});

<!DOCTYPE html>
<html lan='ja'>
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>GeoExt Popup Example</title>
        <script type="text/javascript" src="http://map.godo-tys.jp/ext-3.4.1/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="http://map.godo-tys.jp/ext-3.4.1/ext-all.js"></script>
        <link rel="stylesheet" type="text/css" href="http://map.godo-tys.jp/ext-3.4.1/resources/css/ext-all.css" />
        <script type="text/javascript" src="http://map.godo-tys.jp/OpenLayers/OpenLayers.js" charset="UTF-8"></script>
        <script type="text/javascript" src="http://map.godo-tys.jp/v4/webtis/webtis_v4.js" charset="UTF-8"></script>
        <link rel="stylesheet" href="http://map.godo-tys.jp/v4/css/webtis.css" type="text/css">
        <script type="text/javascript" src="http://map.godo-tys.jp/GeoExt/script/GeoExt.js"></script>
        <!-- <script type="text/javascript" src="popup.js"></script> -->
    </head>
    
    <body>
        	<h1>Popup Window Sample</h1>

    </body>

</html>

        <style type="text/css">
            .olControlMousePosition {
                background-color: white;
                font-size: 14pt;
                height: 15px;
                position: absolute;
                right: 10px;
                top: 0;
            }
        </style>