您忘记了Maps API的样式文件。我还修复了一点ExtJs代码，并添加了 Package 器面板大小调整。
HTML格式：

<!-- From https://Here.com - Here maps -->
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>

app.js

Ext.application({
    name: 'Fiddle',
    requires: [
        'app.HMapPanel'
    ],

    launch: function () {
        Ext.create({
            title: 'Here Test',
            xtype: 'panel',
            width: 500,
            height: 500,
            layout: 'fit',
            resizable: true,
            items: [{
                xtype: 'hmappanel',
            }],
            renderTo: Ext.getBody(),

        });
    }
});

HMapPanel.js

Ext.define('app.HMapPanel', {
    extend: 'Ext.Component',
    alias: 'widget.hmappanel',

    html: '<div id="mapid" style="height: 100%;"></div>',
    config: {
        /**
         * @cfg {String} API Key used to access mapping service
         */
        apikey: 'dfZE7tCiVWqIJWrnJxCUNBuNmSb_jtwmB8fUgy2J4MQ',
        /**
         * @cfg {Object} Reference to platform 
         */
        platform: null,
        /**
         * @cfg 
         */
        defaultLayers: null,
        /**
         * @cfg 
         */
        map: null,
        /**
         * @cfg 
         */
        behavior: null,
        /**
         * @cfg 
         */
        ui: null

    },

    initComponent: function () {
        this.on('afterrender', this.initMap, this);
        this.on('resize', this.resizeMap, this);
        this.callParent();
    },

    initMap: function () {
        var me = this;
        var mapWrapper = Ext.getElementById('mapid');

        //Step 1: initialize communication with the platform
        me.setPlatform(new H.service.Platform({
            apikey: me.getApikey()
        }));
        me.setDefaultLayers(me.getPlatform().createDefaultLayers());

        //Step 2: initialize a map - this map is centered over Europe
        me.setMap(new H.Map(mapWrapper,
                me.getDefaultLayers().vector.normal.map, {
                center: {lat: 50, lng: 5},
                zoom: 4,
                pixelRatio: window.devicePixelRatio || 1
            }
        ));

        //Step 3: make the map interactive
        // MapEvents enables the event system
        // Behavior implements default interactions for pan/zoom (also on mobile touch environments)
        me.setBehavior(new H.mapevents.Behavior(new H.mapevents.MapEvents(me.getMap())));

        // Create the default UI components
        me.setUi(H.ui.UI.createDefault(me.getMap(), me.getDefaultLayers()));

        me.getMap().setCenter({lat:52.5159, lng:13.3777});
        me.getMap().setZoom(14);

    },

    resizeMap: function() {
        this.getMap().getViewPort().resize();
    }
});