Geek asks and answers

ExtJs gmappanel inside the extJs portal

I need extJS Gmappanel inside the extJs portal. The following is an example of an extJS portal. Inside the google portlet, I need a google map.

How can we create an extJs gmappanel file inside an 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

thank

+5
source share
3 answers

I got an answer

I just put gmap in "Ext.ux.GMapPanel" into the library and created 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 the above code

thank

+4
source

Another solution might be to create a custom component. I created a simple violin 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
source

ExtJS gmap . .

.

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

Google, API google.

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

More articles:


All Articles