PDA

View Full Version : Ext.draw.Text rendering issue



bob4ever
10 Apr 2014, 12:33 AM
1. When i try the following code with ext5, the text will be too high and cut off. Am i missing something? On ext4 this code work fine. I have tried it with FF 28, Chrome 34 and IE 11 with the same result. With Opera 20 the code works.



Ext.onReady(function() {
Ext.widget({
xtype: 'window',
layout: 'fit',
autoShow: true,
height: 500,
width: 500,
items:[{
xtype: 'panel',
items: [{
xtype: 'text',
width: 200,
height: 200,
text: 'Hello World'
}]
}]
});
});


2. Maybe you should add the charts package to sencha fiddle.
3. The live demo in the documentation doesn't work probably the charts package isn't loaded..

bob4ever
15 Apr 2014, 12:42 AM
Ok, i think i found the bug. The bug is in Ext.draw.Component in setSurfaceSize in the following line:



this.surface.setViewBox(bbox.x, bbox.y - (+Ext.isOpera), width, height);


(+Ext.isOpera) won't be casted to an integer like expected in FF, IE11 and Chrome. Instead it will be a NaN. With the following code the text will be displayed correctly:



this.surface.setViewBox(bbox.x, bbox.y - (Ext.isOpera ? 1 : 0), width, height);


Additional i think the rotation doesn't work correctly in IE11. The output in IE11 is another than in FF, Chrome and Opera. The text is too low. It has something to do with the fontSize...



var text = Ext.create('Ext.draw.Text', {
xtype: 'text',
width: 400,
height: 200,
text: 'Hello World!',
textStyle: {
'font-size': 32
},
degrees: 20,
setSurfaceSize: function (width, height) {
this.surface.setSize(width, height);
if (this.autoSize) {
var bbox = this.surface.items.getBBox();
this.surface.setViewBox(bbox.x, bbox.y - (Ext.isOpera ? 1 : 0), width, height);
}
}
});

Ext.widget({
xtype: 'window',
layout: 'fit',
autoShow: true,
height: 500,
width: 500,
items:[{
xtype: 'panel',
items: [text]
}]
});

bob4ever
2 Jun 2014, 7:36 AM
Can someone tell me why the bug is still in the release version?

No updates for ext-charts?