<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/resources/css/ext-all.css">
        <link type="text/css" rel="stylesheet" href="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css">
        <link type="text/css" rel="stylesheet" href="style.css">
        <script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-all.js"></script>
        <script type="application/javascript" src="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
        <script type="application/javascript" src="script.js"></script>
    </head>
    <body>
        <input type="button" id="show-btn" value="Gimme a Map" />
    </body>
</html>
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
    'Ext.window.*',
    'LMapPanel'
]);

Ext.onReady(function(){
    var mapwin;
    
    Ext.get('show-btn').on('click', function() {
        if(!mapwin){
            mapwin = Ext.create('Ext.Window', {
                layout: 'fit',
                title: 'Leaflet Panel',
                closeAction: 'hide',
                width:600,
                height:450,
                border: false,
                x: 40,
                y: 60,
                items: {
                    xtype: 'lmappanel',
                }
            });
        }
        mapwin.show();
    });
});
/* Styles go here */

Ext.define('LMapPanel', {
    extend: 'Ext.Panel',
    
    alias: 'widget.lmappanel',
    
    requires: ['Ext.window.MessageBox'],

    afterRender : function(){
        
        var wh = this.ownerCt.getSize(),
            point;
            
        Ext.applyIf(this, wh);
        
        this.callParent();
        
        this.lmap = new L.Map(this.body.dom, {
            'center': [51.433333, 5.483333],
            'zoom': 10,
            'layers': [
                L.tileLayer('//{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
                    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
                })
            ]
        });
    },

    afterComponentLayout : function(w, h){
        this.lmap.invalidateSize();
        this.callParent(arguments);
    }
});