Показать сообщение отдельно
  #1 (permalink)  
Старый 28.02.2012, 13:50
Аспирант
Отправить личное сообщение для Eugent Посмотреть профиль Найти все сообщения от Eugent
 
Регистрация: 28.02.2012
Сообщений: 55

ExtJs4. Нужна помощь с Ext.resizer.Resizer
Привет всем. Есть такая проблемка - в ExtJS 3 был такой компонент Ext.resizable, при помощи которого на див можно было подвесить изменение его размеров и перемещение по области.
В ExtJS4 компонент такой есть, но его уже нельзя перемещать. С drag&drop почти не работал, но так понимаю, что нужно сделать dd для этого компонента. Хотелось бы узнать можно ли еще как-то сделать, чтобы этот resizer был перемещаемым?

Задача стоит такая - есть картинка, нужно на нее повесить активные области, которые можно перемещать и изменять их размеры.

сейчас есть код, который выводит в панель тег div с подключенным тегом img, к которому затем подключаются div для этих областей. Привожу пример контроллера:

UPD: Нашел только вариант с Ext.dd.dd, поменял код. Но по-моему не так немного надо делать...

'viewport systemcenter': {
	'afterrender': function(th_panel){
		var draft_id = 65445;
		var data = [
			{
				hotspot_id: 125,
				x1: 0, x2: 25,
				y1: 240, y2: 265
			}
		];
		var div_id = 'draft_div_' + draft_id;
		var img_id = 'img_div_' + draft_id;
		th_panel.update('<div id = "' + div_id + '"><img id = "' + img_id + '" src = "/data/2067985.gif" width = "1024" height = "656" /></div>');				
		
		var hot_spots = [];
		for(var i = 0; i < data.length; i++){
			
			var hot_spot = {
				tag: 'div',
				cls: 'hot_spot',
				id: 'hot_spot_' + data[i].hotspot_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)
				}				
			};
			
			Ext.DomHelper.append(div_id, hot_spot);
			
			hot_spots.push(Ext.apply(data[i], {
				el: hot_spot.id
			}));
		};
		
		for(var i = 0; i < hot_spots.length; i++){			
			Ext.create('Ext.resizer.Resizer', {
				el: hot_spots[i].el,
				dynamic: true,
				handles: 'all',
				minWidth: 25,
				minHeight: 25,
				maxWidth: 500,
				maxHeight: 400,
				pinned: false
			});
		        var dd = new Ext.dd.DD(data[i].el, 'spots', {
				isTarget  : false
			});
			dd.startDrag = function(){
				this.constrainTo(img_id);
			};
		}
	}
}

Последний раз редактировалось Eugent, 28.02.2012 в 16:29.
Ответить с цитированием