我想在extJs门户网站内部使用extJS Gmappanel。下面是示例extJS门户。在“google”portlet中,我需要有谷歌地图。
我们如何在extJs门户中创建extJs gmappanel?
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();
}
}
});
请帮助
感谢
答案 0 :(得分:5)
我得到了答案
我只是将gmap放在Ext.ux.GMapPanel
库中&amp;创建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'
}
},
}
});
使用上面的代码
感谢
答案 1 :(得分:4)
另一种解决方案可能是创建自定义组件。我创造了一个简单的小提琴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
);
}
}
});
答案 2 :(得分: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
});