extJs gmappanel inside extJs portal

Question

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

Answer 1

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