Javascript-форум (https://javascript.ru/forum/)
-   ExtJS (https://javascript.ru/forum/extjs/)
-   -   ExtJs4. Нужна помощь с Ext.resizer.Resizer (https://javascript.ru/forum/extjs/26157-extjs4-nuzhna-pomoshh-s-ext-resizer-resizer.html)

Eugent 28.02.2012 13:50

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);
			};
		}
	}
}

Pavel M. 28.02.2012 23:52

Цитата:

Сообщение от Eugent
Привет всем. Есть такая проблемка - в ExtJS 3 был такой компонент Ext.resizable, при помощи которого на див можно было подвесить изменение его размеров и перемещение по области.
В ExtJS4 компонент такой есть, но его уже нельзя перемещать.

в extjs 4 любому компоненту можно задать что он и resizable и draggable

<!DOCTYPE html>
<html>
<head>
	<title>demo</title>
	<script src='http://dev.sencha.com/deploy/ext-4.0.7-gpl/ext-all.js'></script>
	<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.0.7-gpl/resources/css/ext-all.css">
	<script>
	Ext.onReady(function() {
		Ext.create('Ext.Component', {
			html: '<img src="http://www.sencha.com/img/20110215-feat-html5.png" style="width:100%; height:100%; cursor:move;">',
			width: 92,
			height: 45,
			floating: true,
			draggable: true,
			resizable:true,
			renderTo: Ext.getBody()
		});
	});
	</script>
</head>
<body></body>
</html>

Eugent 29.02.2012 09:30

Спасибо) Немного преобразовал код и все начало работать как нужно.


Часовой пояс GMT +3, время: 21:08.