Привет всем. Есть такая проблемка - в 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);
};
}
}
}
