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
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?
ReplyDeleteI 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.
ReplyDelete