View Full Version : Drag an arrow (ExtJS+Raphael)

11 Feb 2011, 6:57 AM
Hi! I'm trying to draw an arrow with Raphael from an ExtJS component, as a Panel. I found this example: http://fcargoet.evolix.net/demos/extjs/Ext.ux.DDArrow/example/arrow.html
thai is very similar to what I want, but using a Panel instead of a GridPanel. I trying to attach a DragZone to the Panel, but without success :(


//crea il plugin e imposta le caratteristiche della freccia e della linea
var arrowPlugin = new Ext.ux.DDArrow({
strokeWidth : 3,
arrowWidth : 8,
color : 'green'

var a= new Ext.Panel({
renderTo : Ext.getBody(),
title : 'ExtJS Books',
width : 800,
height : 300,
layout : {
type : 'hbox',
align : 'stretch'
defaults : {
flex : 1
plugins : [arrowPlugin],


var zona= a.body;
var zonadrag = new Ext.dd.DragZone(zona, {
ddGroup : 'rightGridDDGroup',
notifyDrop : function(ddSource, e, data){

return true


The plugin code is the same of the example.

25 Jun 2012, 6:12 AM

I have the same problem , but didn't get any solution yet.
Hope you got something till now.


25 Jun 2012, 10:04 AM
Hi, I used the code found here: https://github.com/cjheath/Raphaelle/blob/master/example.html . It allows you to draw a line pressing the ctrl key. I modified that code for drawing a line with an arrow on the middle like this:


Let me know if you need help.

25 Jun 2012, 11:12 PM
Hey Thanks DD JJ for helping me but that example used JQuery but I want to be with purely Raphael or ExtJs+Raphael.

I think you have develop your application with ExtJs + Raphael ( as your post focus on ), hope you may help me for the same, and for mean time I'm looking in to the above example that you have suggested me.

Thanks once again:)

26 Jun 2012, 4:08 AM
Hi, I used that code for dragging a line (with jQuery and Raphael). I wanted also to do all with extjs and I also started a project on github for converting that code from jQuery to extjs, but due to lack of time I abandoned it. If you are interested you can collaborate to my repo and help me to finish the work