如何使用Sencha Touch 2中的Ext.ux.Leaflet Map显示Openstreetmap

Question

我一直在浏览HTML5基础移动框架并使用Sencha Touch进行游戏。它看起来很棒，但很难熟悉，尤其是调试。我想显示Open Street Map，我发现了一个名为Ext.ux.LeafletMap的插件。我放了一些代码，但我无法在浏览器上获取地图。

这是我的代码：

应用程序/视图/ Main.js

Ext.define("MyApp.view.Main", {
    extend: 'Ext.TabPanel',
    requires: [
        'Ext.TitleBar',
        'MyApp.view.Home',
        'MyApp.view.Map'

    ],
    config: {
        tabBarPosition: 'bottom',

        items: [
            {
                xtype: 'homecard'
            },
            {
                xtype: 'mapcard'
            }
        ]
    }
});

应用程序/视图/ Map.js

Ext.define('MyApp.view.Map', {
    extend: 'Ext.Panel',
    xtype: 'mapcard',

    requires: ['Ext.ux.LeafletMap'],

    config: {
        title: 'Map',
        iconCls: 'maps',
        items: [{
            layout: 'fit',
            items: [{
                docked: 'top',
                xtype: 'titlebar',
                title: 'Maps',
                items: [{
                     xtype: 'button',
                     align: 'left',
                     ui: 'back',
                     text: 'Back'
                }]
            }, {
            // Ext.ux.LeafletMap Component          
                xtype: 'leafletmap',
                id: 'leafletmap',
                useCurrentLocation: false,
                autoMapCenter: false,
                enableOwnPositionMarker: false,
                mapOptions: {
                    zoom: 15
                }
            }]
        }]
    }
});

主页视图显示良好，但地图页面中没有任何内容。在浏览器调试控制台中没有错误。 感谢您的帮助。