Sunday, 27 October 2013

ExtJS-JSplumb Integration - Flowchart Demo

ExtJS 4 is a very popular javascript framework to design Rich Internet Applications. It has its own drawing mechanism to draw charts but it doesn't support flowchart mechanism out-of the box. There are some plugins available to draw flowcharts to some extent.
JSPlumb is one of the famous drawing framework to draw shapes/components and connect them. It is build on top of jquery, so we can make use of all the advantages of jquery as well.

While I was trying to draw flowcharts in ExtJS, I found JSplumb is one of the suitable frameworks for my requirements, but I couldn't get a complete post/material to integrate these two. Finally I had to buy some time to integrate them and here comes the post.

There are wide-variety of javascript libraries available on net(Raphael, Processing.js...) but none of them support diamond(Decision) box as as component. Since JSplumb is built on jquery, we can play with html+CSS and get components as per our wish. 

In the following fiddle, go to the Result tab, right click on the pane and play-around with it. I have added some jquery events to prove some of the jquery actions.

Here is the sample fiddle  and following is the sample snap-shot of it.

Here is the source code : Extjs-Jsplumb-html


  1. Thanks for your example! However, I noticed that you can't drag an endpoint off in order to delete a connection. I've been trying to fix it myself, but can't seem to get it to work. Any ideas?

  2. I figured it out... it's your version of jsPlumb. I tried using vers 1.4.1 (jquery.jsPlumb-1.4.1-all-min.js) and the delete functionality now works. There might also be an issue with jquery-ui, and in my case I use 1.9.2 without problem. As for the rest: extJS 4.2.1 and jquery 1.9.1 . This entire combination worked.