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, время: 00:23. |