PDA

View Full Version : Cannot create an instance of unrecognized alias: widget.gmappanel



sedoyksa
31 Oct 2011, 12:08 PM
i call it from window



var cont = new Ext.Window({
layout: 'fit',
closeAction: 'hide',
border: false,
width:1162,
height:380,
renderTo: Ext.getBody(),
title: '?????',
resizable: false,
draggable: false,
closable: false,
border: false,
x:200,
y:70,
items: {
xtype: 'gmappanel',
zoomLevel: 14,
gmapType: 'map',
mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
setCenter: {
geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA',
marker: {title: 'Fenway Park'}
},
markers: [{
lat: 42.339641,
lng: -71.094224,
marker: {title: 'Boston Museum of Fine Arts'},
listeners: {
click: function(e){
Ext.Msg.alert({title: 'Its fine', text: 'and its art.'});
}
}
},{
lat: 42.339419,
lng: -71.09077,
marker: {title: 'Northeastern University'}
}]
}


});


cont.show();

but i have errors on firebug http://clip2net.com/s/1hzcj
why? what is it?

mitchellsimoens
31 Oct 2011, 12:18 PM
Did you include the GMapPanel.js file?

sedoyksa
31 Oct 2011, 12:23 PM
Did you include the GMapPanel.js file?

how?

mitchellsimoens
31 Oct 2011, 12:27 PM
how?

Two ways...


Add it to the Ext.require call (copy the class JS file to a folder where you keep any ux files)
Include it as a script tag.


The ux classes usually aren't included in the framework.

sedoyksa
31 Oct 2011, 12:42 PM
just a simple
<script type="text/javascript" src="google/ux/gmappanel.js"></script>
yes?

mitchellsimoens
31 Oct 2011, 12:44 PM
As long as that JS file is the correct one that comes with the 2.x framework.

sedoyksa
31 Oct 2011, 12:44 PM
i write it but error is still

sedoyksa
31 Oct 2011, 12:50 PM
the error still on
i have correct file from ext-4.0.7-gpl

sedoyksa
31 Oct 2011, 12:59 PM
it works!!!

mitchellsimoens
31 Oct 2011, 1:05 PM
Include this:


<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAU95kDVDU-5Ve389sRBZmMRSDS7actCjtp4xNzNUSW7xICtwjdhQlKWh2kPaIb2ipOUl4vGqcEu0kWw" type="text/javascript"></script>

here is my entire page that is working:



<html>
<head>
<title>ExtJS 4 Test</title>

<link rel="stylesheet" type="text/css" href="http://extjs4/resources/css/ext-all.css" />
<script type="text/javascript" src="http://extjs4/ext-all-debug.js"></script>

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAU95kDVDU-5Ve389sRBZmMRSDS7actCjtp4xNzNUSW7xICtwjdhQlKWh2kPaIb2ipOUl4vGqcEu0kWw" type="text/javascript"></script>

<script type="text/javascript">
Ext.Loader.setConfig({
enabled : true,
paths : {
'Ext.ux' : '../ext-4.0.7/examples/ux'
}
});
Ext.require([
'Ext.window.*',
'Ext.ux.GMapPanel'
]);

Ext.onReady(function(){
var mapwin = Ext.create('Ext.Window', {
layout: 'fit',
title: 'GMap Window',
closeAction: 'hide',
width:450,
height:450,
border: false,
x: 40,
y: 60,
items: {
xtype: 'gmappanel',
zoomLevel: 14,
gmapType: 'map',
mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
setCenter: {
geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA',
marker: {title: 'Fenway Park'}
},
markers: [{
lat: 42.339641,
lng: -71.094224,
marker: {title: 'Boston Museum of Fine Arts'},
listeners: {
click: function(e){
Ext.Msg.alert({title: 'Its fine', text: 'and its art.'});
}
}
},{
lat: 42.339419,
lng: -71.09077,
marker: {title: 'Northeastern University'}
}]
}
});

mapwin.show();

});
</script>
</head>
<body>
</body>
</html>

You will need to change the script and link tag to point to wherever you have ext js 4.x