PDA

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



Anup_shah
23 Apr 2014, 6:35 PM
Hi there
48811
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
28 Apr 2014, 11:16 AM
You can simply draw these using Ext.draw.Component

venkatesh teja
28 Apr 2014, 10:44 PM
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
6 Dec 2014, 3:24 AM
Can any one tell how to implement the above flow chart in a panel ?????