PDA

View Full Version : horizontal line with multiple markers



patel.kartikv
21 Apr 2014, 11:13 AM
Hi
can anyone please let me know how to create horizontal line with multiple markers on it. I have a workflow where I need to show logical path from one point to other and I want to use graphical notation for same.

so instead of showing A->B->C. I would like to show them in single line with A as starting point , B as in between marker and C as end point.

Something like shown in below image (with red line)

https://blogs.atlassian.com/wp-content/uploads/WhatsNew_Annotated_Crucible_2.png

Gary Schlosberg
21 Apr 2014, 12:07 PM
You should be able to do that with using Ext.draw.Component (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.draw.Component). You could draw three circles (like the example) and connect them with a path (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.draw.Sprite-cfg-path).

jsakalos
21 Apr 2014, 11:30 PM
I think you can go with pure html/css:



<!DOCTYPE html>
<html>
<head>
<title>Example by Saki</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.ct {
}
.marker {
display:inline-block;
width:8px;
height:8px;
border:2px solid orange;
border-radius:8px;
vertical-align:middle;
margin: 0 -6px;
}
.line {
border-top:2px solid orange;
display:inline-block;
height:0;
vertical-align:middle;
}
</style>
</head>
<body>
<div class="ct">
<span class="marker"></span>
<span class="line" style="width:100px"></span>
<span class="marker"></span>
<span class="line" style="width:120px"></span>
<span class="marker"></span>
</div>
</body>
</html>
<!-- eof -->

patel.kartikv
22 Apr 2014, 6:32 AM
thanks jsakalos (http://www.sencha.com/forum/member.php?2178-jsakalos) . IT worked... Can you please tell me how can I show text (A,B,C) on top of marker and also put some text on top of line.

jsakalos
22 Apr 2014, 7:00 AM
You need another "set of spans" with texts within ct - the only task is to position them properly with css.

jsakalos
22 Apr 2014, 1:33 PM
See this example: http://extjs.eu/examples/#marker-line