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