1. #1
    Sencha User
    Join Date
    Apr 2014
    Posts
    1
    Vote Rating
    0
    Anup_shah is on a distinguished road

      0  

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

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


    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.

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,154
    Vote Rating
    475
    Answers
    685
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    You can simply draw these using Ext.draw.Component

  3. #3
    Sencha User
    Join Date
    Jul 2013
    Location
    Hyderabad
    Posts
    13
    Vote Rating
    0
    Answers
    2
    venkatesh teja is on a distinguished road

      0  

    Default


    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 :

    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.

Thread Participants: 2

Tags for this Thread