Thank you for your help,
Sorry I use a full GPL version of Sencha Touch 2.1 that embeds Ext.Chart.* and Ext.Draw.*... if not I would get an error on
Code:
requires: ['Ext.draw.sprite.Path']
, right?
After a while I figure out what the error was : I did not add the correct require config. But I must admit that the error log is not clear about that. So after adding the requires: ['Ext.Draw.Component'] config it works.
If anyone is interested, here is the full code slightly modified of the Container :
Code:
/**
*
* InteractiveMapView definition
*
* in MyApp by Jeremy Lauraire
* v 0.1, 10/01/2012
*
*/
Ext.define('MyApp', {
extend: 'Ext.Container',
xtype : 'interactivemap',
requires: [
'Ext.draw.sprite.Path',
'Ext.draw.Component'
],
config: {
layout: 'fit'
},
initialize: function() {
this.callParent(arguments);
var geo_data = [HERE GOES THE DATA];
geo_data = geo_data.map(function (path) {
item = Ext.create("Ext.draw.sprite.Path", {
path: path,
fx: {
duration: 200
},
highlightCfg: {
shadowColor: 'black',
shadowBlur: 8,
shadowOffsetX: 3,
shadowOffsetY: 3,
fillStyle: '#f18729',
zIndex: 100
},
modifiers: ['highlight']
});
return item;
});
geo_data[0].setAttributes({
highlight: true
});
var lastHighlight = geo_data[0];
var interactiveMap = new Ext.draw.Component({
sprites: geo_data,
resizeHandler: function (size) {
var surface = this.getSurface('main'),
bbox = surface.getItems().getBBox(true);
scaling = Math.min((size.width - 30) / bbox.width, (size.height - 30) / bbox.height) * 0.95;
surface.setRegion([0, 0, size.width, size.height]);
surface.getItems().setAttributes({
fill: '#b7b6b6',
stroke: 'black',
translationX: -(bbox.x + bbox.width / 2) * scaling + size.width / 2,
translationY: -(bbox.y + bbox.height / 2) * scaling + size.height / 2,
scalingCenterX: 0,
scalingCenterY: 0,
scalingX: scaling,
scalingY: scaling
});
},
listeners: {
element: 'element',
tap: function (e) {
// hightlights the selected area...
var items = this.getSurface().getItems().items;
var i, ln = items.length,
item, mat = items[0].attr.inverseMatrix,
x = mat.x(e.pageX, e.pageY),
y = mat.y(e.pageX, e.pageY),
bbox, highlight = null;
for (i = 0; i < ln; i += 1) {
item = items[i];
bbox = item.getBBox(true);
if (bbox.x <= x && x <= bbox.x + bbox.width && bbox.y <= y && bbox.y <= bbox.y + bbox.height) {
if (item.attr.path.isPointInPath(x, y)) {
highlight = item;
break;
}
}
}
if (lastHighlight !== highlight) {
if (lastHighlight) {
lastHighlight.setAttributes({
highlighted: false
});
}
if (highlight) {
highlight.setAttributes({
highlighted: true
});
}
lastHighlight = highlight;
}
}
}
});
this.add(interactiveMap);
console.log('InteractiveMap:initialize');
}
});
I can move on my new problem : build the geo data from a .svg file... Easy compare to debug this... 
Thank you,
J.