I created a custom legend panel for an Ext chart using Ext.draw.Text.... In my application, legends may have long custom texts. So I need to split them using a fixed length. One way would be two split the text using Javascript and create text sprites for each part of text.
Is there any other way to split text in Ext.draw.Text?
Code:
Ext.create('Ext.draw.Component', {
renderTo: Ext.getBody(),
width: 800,
height: 200,
items: [{
type: 'rect',
fill: 'red',
width: 12,
height: 12,
x: 5,
y: 10
},{
type: "text",
text: "This is a long text.. Can i split this into two tspan",
fill: "green",
width: 12,
height: 12,
font: "18px monospace",
x: 25,
y: 15
}]
});
Thanks In Advance.
I was successfully able to generate multiple tspan for Ext.draw.text
by inserting new line characters in text content('\n'). JSFiddle
Ext.create('Ext.draw.Component', {
renderTo: Ext.getBody(),
width: 800,
height: 200,
items: [{
type: 'rect',
fill: 'red',
width: 12,
height: 12,
x: 5,
y: 10
},{
type: "text",
text: "This is a long text.. \n Can i split this into two tspan", //Added new line character
fill: "green",
width: 12,
height: 12,
font: "18px monospace",
x: 25,
y: 15
}]
});