extJs gmappanel dentro del portal extJs

Question

Quería extJS Gmappanel dentro del portal extJs. A continuación se muestra el ejemplo del portal extJS. Dentro del portlet "google", necesito tener un mapa de google.

¿Cómo podemos crear extJs gmappanel dentro del portal extJs?

Ext.define('Ext.app.Portal', { 
extend: 'Ext.container.Viewport', 
uses: ['Ext.app.PortalPanel', 'Ext.app.PortalColumn', 'Ext.app.GridPortlet', 'Ext.app.ChartPortlet'], 
getTools: function(){ 
    return [{ 
     xtype: 'tool', 
     type: 'gear', 
     handler: function(e, target, panelHeader, tool){ 
      var portlet = panelHeader.ownerCt; 
      portlet.setLoading('Working...'); 
      Ext.defer(function() { 
       portlet.setLoading(false); 
      }, 2000); 
     } 
    }]; 
}, 

initComponent: function(){ 
    var content = '<div class="portlet-content">'+Ext.example.shortBogusMarkup+'</div>'; 
    Ext.apply(this, { 
     id: 'app-viewport', 
     layout: { 
      type: 'border', 
      padding: '0 5 5 5' 
     }, 
     items: [{ 
      id: 'app-header', 
      xtype: 'box', 
      region: 'north', 
      height: 70, 
      html: 'Dimestore Reports' 
     },{ 
      xtype: 'container', 
      region: 'center', 
      layout: 'border', 
      items: [ 
      { 
       id: 'app-portal', 
       xtype: 'portalpanel', 
       region: 'center', 
       items: [ 

       { 
        id: 'col-1', 
        items: [ 
        { 
         id: 'portlet-1', 
         title: 'google', 
         tools: this.getTools(), 
         items: {}, //I want ExtJs Form here. 
         listeners: { 
          'close': Ext.bind(this.onPortletClose, this) 
         } 
        }, 
        { 
         id: 'portlet-2', 
         title: 'grid', 
         tools: this.getTools(),       
         html: content, 
         listeners: { 
          'close': Ext.bind(this.onPortletClose, this) 
         } 
        } 
        ] 
       }] 
      }] 
     }] 
    }); 
    this.callParent(arguments); 
}, 
onPortletClose: function(portlet) { 
    this.showMsg('"' + portlet.title + '" was removed'); 
}, 
showMsg: function(msg){ 
    var el = Ext.get('app-msg'), 
    msgId = Ext.id(); 
    this.msgId = msgId; 
    el.update(msg).show(); 
    Ext.defer(this.clearMsg, 3000, this, [msgId]); 
}, 
clearMsg: function(msgId) { 
    if (msgId === this.msgId) { 
     Ext.get('app-msg').hide(); 
    } 
} 

});

por favor ayuda

gracias

Answer 1

Tengo la respuesta

acabo de poner el gmap en 'Ext.ux.GMapPanel' en la biblioteca & crear un Gmappanel

Ext.create('Ext.ux.GMapPanel', { 
        autoShow: true, 
        layout: 'fit',       
        closeAction: 'hide',      
        height:300, 
        border: false, 
        items: { 
         xtype: 'gmappanel', 
         center: { 
          geoCodeAddr: 'pune,maharashtra', 
          marker: {title: 'Pune'} 
         }, 

        } 
       }) 
      }] 
     }] 

    }) 

usando por encima de código

gracias

Answer 2

Otra solución podría ser la creación de un componente personalizado. Creé un simple violín here.

Ext.define('MyApp.view.Map', { 
    extend : 'Ext.Component', 
    alias : 'widget.map', 

    config : { 
     /** 
     * 
     * @cfg {Object} mapConfig 
     * The map specific configurations as specified 
     * in the the [Google Maps JavaScript API][googleMaps] 
     * 
     * [googleMaps]: https://developers.google.com/maps/documentation/javascript/3.exp/reference#MapOptions 
     */ 
     mapConfig : null 
    }, 

    /** 
    * 
    * @property {google.maps.Map} map 
    * The google map. 
    */ 
    map : null, 

    afterRender : function() { 
     var me = this, 
      mapConfig = me.getMapConfig(); 

     me.map = me.createGoogleMap({ 
      domEl : me.getEl().dom, 
      mapConfig : mapConfig 
     }); 
    }, 

    /** 
    * 
    * @method createGoogleMap 
    * This method creates a new Google map based on the defined 
    * configuration. 
    * 
    * @param {Object} config 
    * The configuration can contain the following 
    * key-value-pairs: 
    * 
    * - domEl {Node} The node do draw the map into. 
    * - mapConfig {Object} The map configuration as specified in the 
    * Google Maps JavaScript API 
    * 
    * @return {google.maps.Map} 
    * 
    * @throws {Error} Throws an error if the Google library is not 
    * loaded. 
    */ 
    createGoogleMap : function (config) { 
     if (typeof google === 'undefined') { 
      throw new Error('The google library is not loaded.');   
     } else { 
      return new google.maps.Map(
       config.domEl, 
       config.mapConfig 
      );    
     } 
    } 
}); 

Answer 3

Algún tiempo Gmap de ExtJS puede que no cumpla con los requisitos. En este caso, puedes intentarlo con el siguiente método.

Para la vista, se puede poner el panel en cualquier lugar.

{ 
    xtype: 'panel', 
    itemId: 'googleMap', 
    height: 500 
} 

Dentro de la utilización del controlador siguiente método para unir el panel y mapa de google entonces se puede utilizar todas las funciones de Google Map API.

var map = new google.maps.Map(this.getView().query('#googleMap')[0].body.dom,{ 
     center: , 
     zoom: , 
     mapTypeId:google.maps.MapTypeId.ROADMAP 
    });