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
Code:
/**
 * @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
Code:
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
Code:
//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
Code:
<?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>