call function inside panel with add?

[myput]

Hello,

I have a panel and i want to call an another panel with a function inside who create a map.
I need this configuration because i want to give latitude and longitude in variable;

How can i call a function in a panel with beforerender please?

what i have:
The main panel:

App.views.DirectoryDetailPanelMap = new Ext.Panel ({
	fullscreen: true,
	dockedItems: [App.views.DirectoryDetailPanelMapToolbar],
	listeners: {
		beforerender: function() {
			App.views.DirectoryDetailPanelMap.add(App.views.DirectoryDetailPanelMapCreateMap);
			//App.views.DirectoryDetailPanelMapCreateMap.initMap("45.935", "6.632");
		}
	}
});

and the map Panel:

App.views.DirectoryDetailPanelMapCreateMap = new Ext.Panel ({
	fullscreen: true,
	initMap: function(latitude, longitude) {
		var pos = new google.maps.LatLng(latitude, longitude);
		var desc = '<div class=\'WPAppMapInfoWindow\'>' + data.markerTitle + '<br/>' + data.markerDescription + '</div>';
		var isRefreshRequired = false;
		if (this.getComponent(0).getXTypes() === 'box/map') {
			this.remove(this.getComponent(0));
			isRefreshRequired = true;
		}
		var map = new Ext.Map ({
			fullscreen: true,
			title: data.name,
			markerDesc: desc,
			markerPos: pos,
			mapOptions: {
				zoom: 5,
				mapTypeId: google.maps.MapTypeId.TERRAIN,
				center: pos,
				mapTypeControl: true,
			},
			listeners: {
				delay: 500,
				afterrender: function(){
					addMarker(this.map, this.markerPos, this.markerDesc);
				}
			}
		});
		this.add(map);
		if(isRefreshRequired) this.doLayout();
	}
});

I don't know how to do for call the function initMap since a panel please

[mitchellsimoens]

I would actually create a utility class for that:

AppUtils = {
    initMap: function(latitude, longitude) {
		var pos = new google.maps.LatLng(latitude, longitude);
		var desc = '<div class=\'WPAppMapInfoWindow\'>' + data.markerTitle + '<br/>' + data.markerDescription + '</div>';
		var isRefreshRequired = false;
		if (this.getComponent(0).getXTypes() === 'box/map') {
			this.remove(this.getComponent(0));
			isRefreshRequired = true;
		}
		var map = new Ext.Map ({
			fullscreen: true,
			title: data.name,
			markerDesc: desc,
			markerPos: pos,
			mapOptions: {
				zoom: 5,
				mapTypeId: google.maps.MapTypeId.TERRAIN,
				center: pos,
				mapTypeControl: true,
			},
			listeners: {
				delay: 500,
				afterrender: function(){
					addMarker(this.map, this.markerPos, this.markerDesc);
				}
			}
		});
		this.add(map);
		if(isRefreshRequired) this.doLayout();
	}
};

Now you have a problem because you use 'this' within that. You can do two things...

Add an argument in the initMap that is the component and replace 'this' with that argument.

You can change the scope of the call like this: AppUtil.initMap.call(this, long, lat);