<!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: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>'
})
]
});
},
afterComponentLayout : function(w, h){
this.lmap.invalidateSize();
this.callParent(arguments);
}
});