PDA

View Full Version : Include Google Earth api to extjs



saldiase
27 Aug 2012, 11:55 PM
Hi,

First of all, I'm a newborn on extjs. I'm trying to include the Google Earth (GE) api on Sencha. In order to achieve it, I use http://code.google.com/p/ext-js-google-earth-api/ but this webpage works different than mine.
In my requirements I have several panels and just in one of them GE is required (in the example it appears in all panels). I have divided view from control function

extjs
|-> index.php
|-> js
|-> app
| |-> controller
| |-> navigationpanels
| |-> googleearth
| |-> earth.js (*)
| |-> ...
|-> data
|-> model
|-> store
|-> view
| |-> GePanel.js (*)
| |-> navigationpanels
| | | |-> EarthPanel.js (*)

Anyone knows how to implement it?

earth.js


/**
* @class SNF.controller.navigationpanels.sphere.Sphere
* @extends Ext.app.Controller
*
* Gestiona los eventos reslacionados con el panel de información "Sphere"
*
*/

Ext.define('SNF.controller.navigationpanels.sphere.Sphere', {
extend: 'Ext.app.Controller',

views: ['navigationpanels.SpherePanel',
'GePanel'],
refs: [
{ref: 'earthPanel', selector: 'dnp-earthpanel', autoCreate: true, xtype: 'dnp-earthpanel'},
{ref: 'panelsContainer', selector: 'navigationpanelscontainer', xtype: 'navigationpanelscontainer'},
{ref: 'GePanel', selector: 'gepanel', autoCreate: true, xtype: 'gepanel'},
{ref: 'workPanel', selector: 'workpanel', xtype: 'workpanel'},
{ref: 'footerPanel', selector: 'footerpanel', xtype: 'footerpanel'}

],

init: function() {

this.control({
'dnp-spherepanel button[action = showmap]':{
click: this.showMap
}
});

//console.log("add earthPanel...");

// Add dynamic container
this.getPanelsContainer().addComponentInOrder(this.getEarthPanel());

}, //eof init

//mostrar mapa
showMap: function(){
Ext.onReady(function(){

});
var wp = this.getWorkPanel();
wp.addComponent(this.getGePanel());
}

});


EarthPanel.js


Ext.define('SNF.view.navigationpanels.EarthPanel' ,{
extend: 'Ext.panel.Panel',

alias: 'widget.dnp-spherepanel',

title: 'Google Earth',
iconCls: 'nav',

dnpOrder: 40, //order of the navigation panel

layout: {
type: 'vbox',
padding: 5,
align: 'stretch'
},

initComponent: function() {

this.items = [
{
xtype: 'button',
text: 'show map',
margin: '5 0 0 0',
action: 'showmap' //panel-check-radio-example
}];

this.callParent(arguments);
} //eof initComponent

});



GePanel.js


//Ext.namespace('Ext.ux');

Ext.define('SNF.view.GePanel' ,{
extend: 'Ext.panel.Panel',

alias: 'widget.gepanel',

initComponent: function(){
alert('hello earth');
this.earth = object;
this.earth.getWindow().setVisibility(true);
this.earth.getNavigationControl().setVisibility(this.earth.VISIBILITY_SHOW);
this.setLayers(this.earthLayers);
this.setOptions(this.earthOptions);
this.fireEvent('earthLoaded', this);
this.callParent(arguments);
},

// Create Google Earth instance when panel is rendered
afterRender: function(){
SNF.view.GePanel.superclass.afterRender.call(this);
google.earth.createInstance(this.body.dom, this.onEarthReady.createDelegate(this), {});
},

// Called by above function
onEarthReady: function(object){
this.earth = object;
this.earth.getWindow().setVisibility(true);
this.earth.getNavigationControl().setVisibility(this.earth.VISIBILITY_SHOW);
this.setLayers(this.earthLayers);
this.setOptions(this.earthOptions);

this.fireEvent('earthLoaded', this);
}
});


index.php


<?php
session_start();
?>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><?php echo APP_TITLE . ' ' . APP_VERSION?></title>

<link rel="stylesheet" type="text/css" href="js/extjs/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="resources/css/app.css">


<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAvQLslBJZByOlS8Y3iPXgexSV5romlzgkIRRVpZz7TQ7Jsa0ZQxRh2GVXWb7jYX7ajChOO9olKH0Sgg"></script>
<script type="text/javascript">
var gAppTitle = '<?php echo APP_TITLE . ' ' . APP_VERSION?>',
gChallenge = '<?php echo $challenge?>',
MSG_ERROR_GENERICO = 'Unknown Error!<br>Sorry for the inconvenience.',
DATE_FORMAT_EXTJS = 'Y-m-d H-i-s',
DATE_FORMAT_EXTJS_ES = 'd/m/Y H:i:s';

</script>

<script type="text/javascript" src="js/extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="js/extjs/ux/StatusBar.js"></script>
<script type="text/javascript" src="js/extjs/ux/CheckColumn.js"></script>
<script type="text/javascript" src="js/extjs/ux/GEarthPanel.js"></script>
<script type="text/javascript" src="js/extjs/locale/ext-lang-es.js"></script>
<script type="text/javascript" src="js/md5-min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/extjs/ux/ext-cdn-611.js"></script>
<script type="text/javascript">
google.load("earth", "1");
</script>
</head>

<body>

</body>
</html>