How Can we draw Flow Chart components like line and Circle and position them on panel

[Anup_shah]

Hi there
flow_objects.jpg
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?




like
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.

[scottmartin]

You can simply draw these using Ext.draw.Component

[venkatesh teja]

Hello...

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');
	 points.push(e.getXY());
	},mouseup :function( e, eOpts ){
		debugger;
		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
                });
            chart.surface.add(sprite).show(true);
		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){
			console.log("cominga");
			 sprite = Ext.create('Ext.draw.Sprite', {
		          type: 'path',
			  animate:true,
			  path : "M "+startX+" "+startY+" L "+endX+" "+endY,
		          stroke: 'green',
		          surface: chart.surface,
		          "stroke-width": 2,
		          opacity: 0.5
		        });
		}else{
		    sprite.setAttributes({path:"M "+startX+" "+startY+" L "+endX+" "+endY});
		}
			chart.surface.add(sprite).show(true);
	}
	}
}

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

[Abhinav@11]

Can any one tell how to implement the above flow chart in a panel ?????