如何在Sencha Touch2中使用Ext.ux.lappermap显示开放式街道地图

我一直在浏览基于HTML5的移动框架并使用SenchaTouch。它看起来很棒，但很难熟悉，尤其是调试。我想显示开放的街道地图，我发现了一个名为Ext.ux.lappermap的插件。我输入了一些代码，但无法在浏览器上获取地图

这是我的密码：

app/view/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'
            }
        ]
    }
});

app/view/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
                }
            }]
        }]
    }
});

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