extJs gmappanel all'interno del portale di extJs

Question

Desideravo estJS Gmappanel all'interno del portale di extJs. Di seguito è riportato il portale extJS di esempio. All'interno del portlet "google", ho bisogno di avere google map.

Come possiamo creare extJs gmappanel all'interno del portale 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(); 
    } 
} 

});

si prega di aiuto

grazie

Answer 1

ho avuto la risposta

ho appena messo la gmap in 'Ext.ux.GMapPanel' in libreria & creare 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'} 
         }, 

        } 
       }) 
      }] 
     }] 

    }) 

utilizzando sopra codice

grazie

Answer 2

Un'altra soluzione potrebbe essere la creazione di un componente personalizzato. Ho creato un violino semplice 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

Alcune volte la gmap di ExtJS potrebbe non soddisfare il requisito. In questo caso, puoi provare per il seguente metodo.

Per la visualizzazione, è possibile posizionare il pannello ovunque.

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

All'interno l'uso del controller seguente metodo per collegare il pannello e google map quindi è possibile utilizzare tutte le funzioni di Google Map API.

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