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);
};
}
}
}
|
Цитата:
<!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>
|
Спасибо) Немного преобразовал код и все начало работать как нужно.
|
| Часовой пояс GMT +3, время: 08:22. |