extJs 门户内的 extJs gmappanel答案

【问题标题】：extJs gmappanel inside extJs portalextJs 门户内的 extJs gmappanel
【发布时间】：2018-05-05 02:25:19
【问题描述】：

我想在 extJs 门户中使用 extJS Gmpanel。下面是示例 extJS 门户。在“google”portlet 中，我需要有 google 地图。

我们如何在 extJs 门户中创建 extJs gmpanel？

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

请帮忙

谢谢

【问题讨论】：

我不知道如何添加gmpanel
我已经在 portal.html 中的 ext.require 'Ext.ux.GMapPanel' 和pastebin.com/yPmBi4cpportal.js 中添加了这段代码，但它不会工作

标签： extjs

【解决方案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'
            }
        },

    }
});

使用上面的代码

谢谢

【讨论】：

【解决方案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
            );            
        }
    }
});

【讨论】：

【解决方案3】：

有时ExtJS 的gmap 可能不符合要求。在这种情况下，您可以尝试以下方法。

为了便于查看，您可以将面板放在任何位置。

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

在控制器内部使用以下方法链接面板和谷歌地图，然后您可以使用谷歌地图API的所有功能。

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

【讨论】：