ExtJs4. Активные области на изображении. Проблема с перемещением активных областей.

[Eugent]

Привет всем!)

Есть вопрос по работе с активными областями на изображении. В предыдущем вопросе мне ответили, что любой Ext.Component можно перемещать. Я сделал все активные области перемещаемыми в рамках тега img.
При работе с единственной панелью в viewPort все нормально, но если добавить еще западную панель, то при перемещении активных областей, перемещаемая область смещается на ширину западной панели.

Код данного примера используется на тестовом сервере - http://extdev.eugent.org/

Прилагаю коды:

//объявление контроллера интерфейса
Ext.define('Edu.controller.Interface', {
	...
	//функция инициализации контроллера
	init: function() {
		var _this = this;	//устанавливаем синоним для контроллера
		//устанавливаем обработчики событий
		this.control({ 
			//центральная панель вьюпорта
			'viewport systemcenter': {
				//после рендера вывести изображение и расставить на нем активные div-пятна
				'afterrender': function(th_panel){
					//информация об изображении
					var picture = {
						id	: 65445,
						src: '/data/2067985.gif',
						width: 1024,
						height: 656
					};
					//список активных пятен
					var data = [
						{
							hotspot_id: 125,
							x1: 0, x2: 25,
							y1: 240, y2: 265
						}
					];
					//идентификатор компонента, содержащего изображение
					var div_id = 'draft_div_' + picture.id;
					//идентификатор тега для изображения
					var img_id = 'img_div_' + picture.id;
					//создание компонента для изображения и активных пятен
					var div_image = Ext.create('Ext.Component', {
						id: div_id,
						html: '<img id = "' + img_id + '" src = "' + picture.src + '" width = "' + picture.width + '" height = "' + picture.height + '" />'
					});
					//добавить компонент на панель
					th_panel.add(div_image);
					//создать горячие пятна
					_this.createHotSpots(data, div_id, img_id);
				}
			}
		});
    },
	
	createHotSpots: function(data, div_id, img_id){
		//в цикле создать горячие пятна на чертеж
		for(var i = 0; i < data.length; i++){
			var hot_spot = Ext.create('Ext.Component', {
				id: 'hot_spot_' + data[i].hotspot_id,
				autoEl	: {
					tag: 'div',
					cls: 'hot_spot'
				},
				draggable: {
					constrain: true,
					//ограничить область перемещения тегом изображения
					constrainTo	: Ext.get(img_id)
				},
				resizable:true,
				
				
				//вывести в тег компонент с изображением				
				renderTo	: Ext.get(div_id),
				style: {
					left: data[i].x1,
					top: data[i].y2,
					width: parseInt(Math.abs(data[i].x2 - data[i].x1), 10),
					height: parseInt(Math.abs(data[i].y2 - data[i].y1), 10)
				}
			});
		}
	}
});