View Full Version : Ext.ux.amMap extension - functional

16 Feb 2010, 12:20 AM
Thought I would share this, since I couldn't seem to find one out there. I am a total Ext noob, so don't flame me if there is glaring omissions in functionality, but it works pretty good for me.

It is very closely plagerized from Ext.ux.Fusion (which was a derivative of Ext.ux.Media.chartpack I believe).

Things known to be missing that I couldnt figure out (if anyone wants to take a stab at fixing them) are: reload new data/settings programatically and all the other things that can control amMap programatically. (See source of http://www.aquilatheatre.com/map/Aquila%20Map/examples/javascript_control/ )

Anyways, without further ado...

Ext.ux.amMap = Ext.extend(Ext.FlashComponent, {
initComponent: function() {
if (!this.flashVars) {
flashVars = {};
Ext.applyIf(flashVars, {
debugMode: 0,
DOMId: this.id,
registerWithJS: 1,
lang: 'EN'
this.flashVars = flashVars;
this.on('resize', this.resizeFlash, this);
onRender: function() {
Ext.FlashComponent.superclass.onRender.apply(this, arguments);
var size = this.getSize();
this.renderSwf(size.width, size.height);
renderSwf: function(width, height) {
Ext.apply(this.flashVars, { mapWidth: width, mapHeight: height });

var params = Ext.apply({
allowScriptAccess: 'always',
bgcolor: this.backgroundColor,
wmode: this.wmode,
}, this.flashParams),
vars = Ext.apply({
allowedDomain: document.location.hostname,
elementID: this.getId(),
eventHandler: 'Ext.FlashEventProxy.onEvent',
mapWidth: width,
mapHeight: height
}, this.flashVars);

if (this.dataURL) {
vars.data_file = escape(this.dataURL);

if (this.settingsURL) {
vars.settings_file = escape(this.settingsURL);

if (this.mapPath) {
vars.path = escape(this.mapPath);

new swfobject.embedSWF(this.url, this.id, this.swfWidth, this.swfHeight, this.flashVersion,
this.expressInstall ? Ext.FlashComponent.EXPRESS_INSTALL_URL : undefined, vars, params);

this.swf = Ext.getDom(this.id);
this.el = Ext.get(this.swf);
resizeFlash: function(cmp, width, height) {
if (height > 30) {
if (this.swf) {
var parent = this.swf.parentNode;
var el = new Ext.Element({ tag: 'div', id: this.id });
el.setSize(width, height);
this.renderSwf(width, height);

Ext.ux.amMapPanel = Ext.extend(Ext.Panel, {
animCollapse: false,
initComponent: function() {
this.flash = new Ext.ux.amMap({ url: this.mapURL, dataURL: this.dataURL, settingsURL: this.settingsURL, mapPath: this.mapPath, flashVars: this.flashVars });
layout: 'fit',

/* How to use
var x = new Ext.Window({
height: 400,
width: 400,
layout: 'fit',
items: [new Ext.ux.amMap({
url: 'resources/amMaps/ammap.swf',
dataURL: 'ammap_data.xml',
settingsURL: 'ammap_settings.xml',
mapPath: 'resources/amMaps/'

16 Feb 2010, 12:25 AM
Along the same thread, I have a custom logical network topology builder PHP script that automagically builds the mapdata.xml for a bunch of nodes to overlay onto the map with connecting lines.. Once I get the kinks worked out, I might post it here if there is interest and I'm feeling exceedingly generous when that time comes.

16 Feb 2010, 1:25 AM
The idea sounds nice, do you have a working demo somewhere?