extJs gmappanel wewnątrz portalu extJs

Question

Chciałam extJS Gmappanel wewnątrz portalu extJs. Poniżej znajduje się przykładowy portal extJS. Wewnątrz portletu "google" muszę mieć mapę google.

W jaki sposób możemy stworzyć extJs gmappanel wewnątrz portalu 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(); 
    } 
} 

});

Proszę o pomoc

dzięki

Answer 1

Dostałem odpowiedź

ja po prostu umieścić w GMap '' Ext.ux.GMapPanel w bibliotece & stworzyć 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'} 
         }, 

        } 
       }) 
      }] 
     }] 

    }) 

korzystania powyżej kodu

dzięki

Answer 2

Innym rozwiązaniem może być utworzenie niestandardowego komponentu. Stworzyłem prosty skrzypce here.

Answer 3

Po pewnym czasie zasób programu ExtJS może nie spełniać wymagań. W takim przypadku możesz wypróbować następującą metodę.

Aby zobaczyć, możesz umieścić panel w dowolnym miejscu.

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

Wewnątrz użycia kontrolera następujący sposób połączyć panel i google map, można korzystać z wszystkich funkcji z Google Map API.

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