extjs draggable panel d3js pan zoom don't work - extjs

Question

#mbostock
I have a draggable panel Extjs and i have included a graph d3js, customized drag and drop and added the zoom function.
In a simple html page all work fine, but in Extjs panel when drag a node in addition to move that, also activates pan, i would not disable the pan.
where I'm wrong?
This is the ExtjsPanel:
Ext.namespace("libs");
CSP.prj.tresprj.trestest.libs.MainPanel = Ext.extend(Ext.Panel, {
initComponent : function(){
this.addEvents({
'afterrender': true
});
Ext.apply(this,{title:'My Custom Panel2'});
Ext.apply(this,{html:'<div id="content"><div id="buttonDiv"><p>Selezionare il test da effettuare</p></div><!--buttonDiv--><div id="svgContent"></div><!--svgContent--></div><!--content-->'});
this.addListener('afterrender',function(){
Xxx.createButton("buttonDiv");
});
libs.MainPanel.superclass.initComponent.call(this);
}
});
and this is the Graph code:
var initSvg = function (target) {
//Activate context menu on right click
d3.select("body").attr("oncontextmenu", "return true");
//Create SVG element
if (jQuery(target + " svg").length) {
clearSvgDiv();
}
var svg = d3.select(target)
.append("svg")
.attr("width", width)
.attr("height", heigth)
.attr("id", "drawSvg")
.attr('preserveAspectRatio', 'xMinYMin slice')
.append('g');
return svg;
};
var clearSvgDiv = function () {
d3.select("svg")
.remove();
};
// Init force layout
var initLayout = function (svg) {
svg.append('svg:rect')
.attr('width', width)
.attr('height', heigth)
.attr('fill', 'white');
force = d3.layout.force()
.nodes(graph.getNodes())
.links(graph.getEdges())
.size([width, heigth])
.linkDistance([50])
.charge([-300])
.start();
};
// Creates nodes and edge to draw them on the page, calculated positions and repulsions.
var createNodesEdges = function (svg) {
var x = d3.scale.linear()
.domain([0, width])
.range([0, width]);
var y = d3.scale.linear()
.domain([0, heigth])
.range([heigth, 0]);
svg.call(d3.behavior.zoom().x(x).y(y).scaleExtent([1, 8]).on("zoom", rescale));
var path = svg.append("svg:g").selectAll("path")
.data(graph.getEdges())
.enter()
.insert("svg:path")
.attr("class", "line")
.style("stroke", "#ccc");
var node_drag = d3.behavior.drag()
.on("dragstart", dragstart)
.on("drag", dragmove)
.on("dragend", dragend);
var nodes = svg.selectAll("circle")
.data(graph.getNodes(), function (d) { return d.id; })
.enter()
.append("circle")
.attr("id", function (d) { return d.id; })
.attr("r", 5)
.call(node_drag);
force.on("tick", tick);
function tick() {
path.attr("d", function (d) {
var coordinatesP = findEdgeControlPoints(d);
return "M" + d.source.x + "," + d.source.y + "S" + coordinatesP.xp + "," + coordinatesP.yp + " " + d.target.x + "," + d.target.y;
});
nodes.attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.y; });
}
function dragstart(d, i) {
force.stop(); // stops the force auto positioning before you start dragging
}
function dragmove(d, i) {
d.px += d3.event.dx;
d.py += d3.event.dy;
d.x += d3.event.dx;
d.y += d3.event.dy;
tick();
}
function dragend(d, i) {
d.fixed = true; // of course set the node to fixed so the force doesn't include the node in its auto positioning stuff
tick();
force.resume();
}
};
var rescale = function () {
var trans = d3.event.translate;
var scale = d3.event.scale;
svg.attr("transform","translate(" + trans + ")" + " scale(" + scale + ")");
};

Answer 1

i've found the problem, isn't extjs but minified version of d3js library downloaded by http://d3js.org/, with extended version i've no problem.