Ext.draw.Sprit to draw a horizontal line

3 Attachment(s)

Hi
I have a problem to draw a horizontal line use extjs 4。
My code

Code:

//addCircle is function ,use to draw a circle,it work normally //the arguments panel ,you can regard as a window,and x,y is coordinate addCircle : function(panel,x,y){ var circle = new Ext.draw.Component({ width: 100, height: 100, x : x-200, y : y-10, draggable : true, resizable: { dynamic: !Ext.isIE, pinned: false, preserveRatio : true, handles: 'all' }, items: [{ type: 'circle', fill: '#79BB3F', radius: 50, x: 50, y: 50 }] }); panel.add(circle); }, //addLine is function ,use to draw a line,it work bad addLine : function(panel,x,y){ var line = new Ext.draw.Component({ width : 100, height : 100, x : x-200, y : y -10, draggable : true, resizable: { dynamic: !Ext.isIE, pinned: true, preserveRatio : true, handles: 'all' }, items : [{ type: 'path', stroke : 'blue', fill:'darkblue', 'storke-width' : "4", path : 'M 10 20 H 90 ' }] }); panel.add(line); }

I want to draw a horizontal line.
I use svg test ,you can use the url test
http://www.w3schools.com/svg/tryit.asp?filename=trysvg_path
and you can write the under code

HTML Code:

<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <path d=" M 10,20 H 90" stroke="blue" fill="darkblue" stroke-width="4" /> </svg> </body> </html>

then we can see a horizontal line
Attachment 36412
so , in my extjs code I use the path and write

Code:

path : 'M 10 20 H 90 '

but it can not work.It has no js error,but has no line to display.
Attachment 36414
so , I use firebug to see the html ,
Attachment 36415
but,when i look the html,i think the code is same the above svg code.
I don't know why it can not work.
Thank you very much.

Your Move to command (M) is wrong, it requires a comma, like in your svg example.

Try this path:

Code:

path : 'M 10,20 H 90 '

You should also be aware that you're creating more than one canvas (surface) at the moment. And your giving one canvas only one Sprite. If you want the object to be in the same canvas you'll have to add sprites to one canvas.

Code:

// Create a draw component var drawComponent = Ext.create('Ext.draw.Component', { viewBox: false }); // Create a window to place the draw component in Ext.create('Ext.Window', { width: 220, height: 230, layout: 'fit', items: [drawComponent] }).show(); // Add a circle sprite var myCircle = drawComponent.surface.add({ type: 'circle', x: 100, y: 100, radius: 100, fill: '#cc5' }); // Now do stuff with the sprite, like changing its properties: myCircle.setAttributes({ fill: '#ccc' }, true); // or animate an attribute on the sprite myCircle.animate({ to: { fill: '#555' }, duration: 2000 }); // Add a mouseup listener to the sprite myCircle.addListener('mouseup', function() { alert('mouse upped!'); });

More info: http://docs.sencha.com/ext-js/4-1/#!...g_and_charting

Quote:

Originally Posted by johanhaest

Your Move to command (M) is wrong, it requires a comma, like in your svg example.

Try this path:

Code:

path : 'M 10,20 H 90 '

I has tried.But it also can not display.Thank you very much.

I have to create multiple surface.I must can control every sprite.For example,If i put line,circle,into a surface,when i drag the surface,the line sprite and circle must be dragged together.At fact,I have anthoer method:

Code:

addRect : function(panel,x,y){ var rect = new Ext.draw.Component({ width : 100, height : 30, x : x-200, y : y -10, draggable : true, resizable: { dynamic: !Ext.isIE, pinned: true, preserveRatio : false, handles: 'w e', items : [{ type: 'rect', fill: '#79BB3F', x : 0, y : 0, width : 100, height : 30 }] }); panel.add(rect);

but the rect can display .
So i think may be the line path is wrong?
Thank you very much.

Here is a code example:

Code:

// Create a draw component var drawComponent = Ext.create('Ext.draw.Component', { viewBox: false }); // Create a window to place the draw component in Ext.create('Ext.Window', { width: 220, height: 230, layout: 'fit', items: [drawComponent] }).show(); //Create the line var myLine = drawComponent.surface.add({ type: 'path', fill: 'none', stroke: '#000', 'stroke-width': 2, path: 'M 10,30 H90' }).show(true); //show(true) for automatic (re)draw

same related question from my side as well.

I want to draw horizontal line on chart (Parallel to x axis ), how we can achieve that???

Please provide me you guidance.Its very urgent for me....

Please fine below code and let me know where i am wrong..

Thanks in advance.

Ext.onReady(function () {

var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [
{ 'name': 'metric one', 'data':10 },
{ 'name': 'metric two', 'data': 7 },
{ 'name': 'metric three', 'data': 5 },
{ 'name': 'metric four', 'data': 2 },
{ 'name': 'metric five', 'data':27 }
]
});

Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: store,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['data'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Sample Metrics'
}],
series: [{
type: 'bar',
axis: 'bottom',
highlight: true,
xField: 'year',
yField: ['comedy', 'action', 'drama', 'thriller'],
gutter: 80,
stacked: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views');
}
},
label: {
display: 'insideEnd',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle'
},
xField: 'name',
yField: 'data',
'listeners' : {
'itemmouseover' : function(event){
Ext.MessageBox.alert('TESTING...');
//event.series.chart.fireEvent('itemmousedown', event);
var drawComponent = Ext.create('Ext.draw.Component', {
renderTo: Ext.getBody(),
viewBox: false,
gradients: [{
id: 'grad1',
angle: 90,
stops: {
0: {
color: 'black'
},
1: {
color: '#c6d8ed'
},
99: {
color: '#5f96db'
},
100: {
color: '#6594cf'
}
}
}],
items: [{
/*type: 'rect',
fill: 'url(#grad1)',
width: 700,
height:5,
x:0,
y: 50,
top:-20*/
/*type: 'path',
stroke : 'blue',
fill:'darkblue',
'storke-width' : "4",
path : 'M 10 20 H 90 ',
y:50*/
type: 'path',
fill: 'none',
stroke: '#000',
'stroke-width': 2,
path: 'M 10,30 H90'
}],

}).show(true);
}
}
},
{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'bottom',
xField: 'name',
yField: 'data',
markerConfig: {
type: 'cross',
size: 4,
radius: 4,
'stroke-width': 0
},
label:{
display: 'insideEnd',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: 'black',
'text-anchor': 'middle'
},tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views');
}
}

}]
});

Ext.create('Ext.Button', {
text: 'Used Baseline',
renderTo: Ext.getBody(),
handler: function() {
alert('You clicked the button!');
var drawComponent = Ext.create('Ext.draw.Component', {
renderTo: Ext.chart.Chart(),
viewBox: true,
items: [{
type: 'rect',
fill: 'black',
width: 700,
height:5,
x:10,
y: 50
}]
});

}
});
});