extJs gmappanel extJs पोर्टल

Question

के अंदर मैं extJs पोर्टल के अंदर extJS Gmappanel चाहता था। नीचे नमूना extJS पोर्टल है। "Google" पोर्टलेट के अंदर, मुझे Google मानचित्र होना चाहिए।

हम extJs पोर्टल के अंदर extjs gmappanel कैसे बना सकते हैं?

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(); 
    } 
} 

});

कृपया मदद

धन्यवाद

Answer 1

मैं जवाब

मैं सिर्फ gmap 'Ext.ux.GMapPanel' में पुस्तकालय & में एक 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'} 
         }, 

        } 
       }) 
      }] 
     }] 

    }) 

का उपयोग कर डाल बनाने मिला कोड

धन्यवाद

Answer 2

एक और समाधान एक कस्टम घटक का निर्माण हो सकता है। मैंने एक साधारण पहेली 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

कुछ समय ExtJS का gmap आवश्यकता को पूरा नहीं कर सकता है। इस मामले में, आप निम्न विधि का प्रयास कर सकते हैं।

देखने के लिए, आप कहीं भी पैनल डाल सकते हैं।

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

से जोड़ने के लिए पैनल और गूगल मानचित्र तो आप गूगल मानचित्र एपीआई से सभी कार्यों का उपयोग कर सकते पद्धति का अनुसरण नियंत्रक उपयोग अंदर

।

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