View Full Version : How Can we draw Flow Chart components like line and Circle and position them on panel

23 Apr 2014, 6:35 PM
Hi there
I am using Ext 4.2.

I wanted to create the structure using Ext component, something like as shown in the attached image.

Can you please suggest me How can I achieved this?

1] Line with Arrow
2] Circle, For that I think we can use split.
3] Position the Objects, One circle above one is down side.

28 Apr 2014, 11:16 AM
You can simply draw these using Ext.draw.Component

venkatesh teja
28 Apr 2014, 10:44 PM

If they are fixed images you can draw using ExtJs Sprites.

Or if you want to draw dynamically then with the help of charts we can draw.

Just do chart configuration :

And chart has event like mouseenter, mousemove and mouseup. By using these event i prepared drawing lines dynamically...

Here is the example code :

points =[];listeners:{
mousedown :function( e, eOpts ){
var chart = Ext.getCmp('chartId');
},mouseup :function( e, eOpts ){
var chart = Ext.getCmp('chartId');
var x = e.getXY()[0]-560, y = e.getXY()[1],startX = points[0][0]-560, startY = points[0][1];
var sprite = Ext.create('Ext.draw.Sprite', {
type: 'path',
path : "M "+startX+" "+startY+" L "+x+" "+y,
stroke: 'green',
surface: chart.surface,
"stroke-width": 2,
opacity: 0.5
points = [];
},mousemove :function( e, eOpts ){

if(points.length > 0){

var chart = Ext.getCmp('chartId'),startX = points[0][0]-560, startY = points[0][1];
var endX = e.getXY()[0]-560, endY = e.getXY()[1];
if( sprite == undefined){
sprite = Ext.create('Ext.draw.Sprite', {
type: 'path',
path : "M "+startX+" "+startY+" L "+endX+" "+endY,
stroke: 'green',
surface: chart.surface,
"stroke-width": 2,
opacity: 0.5
sprite.setAttributes({path:"M "+startX+" "+startY+" L "+endX+" "+endY});

Or else you can also use Raphael Js...Thanks,
Venkatesh Teja.

6 Dec 2014, 3:24 AM
Can any one tell how to implement the above flow chart in a panel ?????