ExtJs4. Активные области на изображении. Проблема с перемещением активных областей.
Привет всем!)
Есть вопрос по работе с активными областями на изображении. В предыдущем вопросе мне ответили, что любой 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) } }); } } }); |
Часовой пояс GMT +3, время: 07:55. |