extJs gmappanel inside extJs portal

问题

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

回答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

回答2:

Another solution could be the creation of a custom component. I've created a simple fiddle 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
            );            
        }
    }
});

回答3:

Some time ExtJS's gmap may not meet the requirement. In this case, you can have a try for the following method.

For view, you can put the panel anywhere.

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

Inside the controller use following method to link the panel and google map then you can use all the functions from google map API.

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

来源：https://stackoverflow.com/questions/10482094/extjs-gmappanel-inside-extjs-portal