extJs gmappanel inside extJs portal

extjs

Solution

I got the answer

I just put the gmap in `Ext.ux.GMapPanel` in library & create a `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'
            }
        },

    }
});

using above code

thanks

Problem

I wanted extJS Gmappanel inside the extJs portal. Below is the sample extJS portal. Inside "google" portlet, I need to have google map. How can we create extJs gmappanel inside the extJs portal? ``` 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(); } } }); ``` please help thanks

Original source