PDA

View Full Version : EXT JS 4 in Opera



Bokara
14 Oct 2011, 3:04 AM
Hi,
This is a thread that was in EXT: Discussion. I did not get no answers so I have copy the thread here:

I have a chart inside a Panel (or a Window - it is the same problem):



function Chart(pozicijaChart, param1, param2, param3, param4) {
"use strict";
var win = Ext.create('Ext.form.Panel', {
width: 640,
height: 480,
resizable: false,
draggable: false,
hidden: false,
maximizable: false,
closable: false,
title: 'SomeTitle',
renderTo: pozicijaChart, //This is a div element in index.html
layout: 'fit',
items: [{
xtype: 'chart',
animate: true,
store: storeChart, //JSON remote store
axes: [{
type: 'Category',
position: 'bottom',
fields: 'att_value',
minimum: 0,
dashSize: 0,
label: {
renderer: function (a, f) {
return ''; //This code is used to remove label
}
}
}, {
type: 'Category',
position: 'left',
fields: 'att_red',
label: {
font: '12px Arial'
}
}],
theme: 'Sky',
background: {
gradient: {
id: 'backgroundGradient',
angle: 45,
stops: {
0: {
color: '#ffffff'
}
}
}
},
series: [{
type: 'bar',
autoDestroy: true,
axis: 'bottom',
highlight: true,
label: {
display: 'insideEnd',
field: 'att_value',
orientation: 'horizontal',
contrast: true,
'text-anchor': 'middle'
},
xField: 'att_red',
yField: 'att_value'
}]
}],
tbar: [
{
xtype: 'label',
autoDestroy: true,
width: 180,
html: 'Some_text</b>'
},
{
xtype: 'label',
width: 340,
html: 'Some_text</b>'
},
{
xtype: 'button',
height: 50,
width: 110,
cls: 'x-btn-text-icon',
icon: "img/arrow-back.png",
iconCls: 'an-icon',
text: 'Some_text</b>',
listeners: {
click: function () {
document.getElementById('map').innerHTML = null;
document.getElementById('map').innerHTML = "";
map.render('map');
}
}
}]
});
}


JSON store code (declared public):



function napraviChart(pozicijaChart, param1, param2, param3, param4) {
"use strict";
storeChart = new Ext.data.JsonStore({
autoLoad: true,
autoDestroy: true,
proxy: {
type: 'ajax',
url: 'Results',
actionMethods: {
read : 'POST'
},
reader: {
type: 'json',
autoDestroy: true,
root: 'results'
},
extraParams: {param1: param1, param2: param2, param3: param3}
},
fields: [{name: 'att_red', mapping: 'att_red'},
{name: 'att_value', mapping: 'att_value'}
],
listeners : {
'load': function (Store, records) {
Chart(pozicijaChart, param1, param2, param3, param4);
}
}
});
}

The chart shows ok in IE, Chrome, MFirefox and Maxhton but not in Opera, while this example works fine in Opera:

http://docs.sencha.com/ext-js/4-0/#!/example/charts/Bar.html (http://docs.sencha.com/ext-js/4-0/#%21/example/charts/Bar.html)

About Opera:
Version information
Version
11.51

Build
1087

Platform
Win32

System
Windows XP

XHTML+Voice
Plug-in not loaded

Thanks!

skirtle
14 Oct 2011, 7:12 AM
Your current test case makes it quite difficult for us to help you. It relies on remote data, so we have to go to a lot of effort to run your code. Where possible you should try to post examples that include local data. You've also got a lot of unnecessary code. Try removing all of the optional config settings (draggable, resizable, hidden, etc.) and the toolbar. Not only will this make it much easier for us to read your code but there's also a good chance you'll figure out what's wrong while you're trimming it back.

I had a play with your code. One observation I made is that it fails in Opera if the data is missing fields. Check your data. Make sure you have both fields defined for all records (make sure they are spelt correctly, this was the mistake I made).

If your data is definitely correct, try producing a complete, minimal test case (as I described above) so that we can see exactly what you're seeing.

Bokara
14 Oct 2011, 7:27 AM
Thank you for the advice !
I will try it.
I am amazed because it works in all browsers but Opera.

skirtle
14 Oct 2011, 8:53 AM
It is a bit odd, I'll grant you. In my case, inspecting the SVG using Dragonfly showed a lot of NaN values for the co-ordinates. Quite why this only happens in Opera I don't know, I couldn't be bothered to dig any deeper once I realized it was caused by a mistake in my data.

Bokara
15 Oct 2011, 3:54 PM
I have cleared the code from thing i dont nead chart to functione proper.
Still do not have an idea what to do to fiks this to work in opera? Maybe now it will be easyer for someone to help me?
Thanks!


function Chart(pozicijaChart,PARAM1, PARAM2, PARAM3, PARAM4) {

var win = Ext.create('Ext.Window', {
width: 640,
height: 480,
hidden: false,
title: 'Title:',
renderTo: pozicijaChart,
layout: 'fit',
items: {
id: 'chartCmp',
xtype: 'chart',
store: storeChart,
theme: 'Sky',
axes: [{
type: 'Numeric',
position: 'bottom',
fields: 'att_value',
minimum: 0,
label: {
renderer: function (a, f) {
return '';
}
}
}, {
type: 'Category',
position: 'left',
fields: 'att_red',
label: {
font: '8px Arial'
}
}],
series: [{
type: 'bar',
axis: 'bottom',
highlight: true,
label: {
display: 'insideEnd',
field: 'att_value',
orientation: 'horizontal',
contrast: true,
'text-anchor': 'middle'
},
xField: 'att_red',
yField: 'att_value'
}]
},
tbar: [
{
xtype: 'label',
width: 180,
html: 'HtmlText'
},
{
xtype: 'label',
width: 330,
html: 'HtmlText'
},
{
xtype: 'button',
height: 50,
width: 110,
text: 'text'
}]
});
}




function napraviChart(pozicijaChart, PARAM1, PARAM2, PARAM3, PARAM4) {

storeChart = new Ext.data.JsonStore({
autoLoad: true,
proxy: {
type: 'ajax',
url: 'Results',
actionMethods: {
read : 'POST'
},
reader: {
type: 'json',
root: 'results'
},
extraParams: {PARAM1:PARAM1, PARAM2:PARAM2, PARAM3:PARAM3}
},
fields: [{name: 'att_red', mapping: 'att_red'},
{name: 'att_value', mapping: 'att_value'}
],
listeners : {
'load': function (Store, records) {
Chart(pozicijaChart, PARAM1, PARAM2, PARAM3, PARAM4);
}
}
});
}

skirtle
16 Oct 2011, 8:39 AM
I have cleared the code from thing i dont nead chart to functione proper.

Your test case is still nothing like the minimal test case I requested previously. I've spent some time reducing your code down to a proper test case. Notice how it uses local data and I've removed most of the config options (including the toolbar). Please ensure that your test cases look a bit more like this in future:


Ext.create('Ext.chart.Chart', {
height: 480,
renderTo: Ext.getBody(),
width: 640,
axes: [
{
fields: 'att_value',
position: 'bottom',
type: 'Category',
label: {
renderer: function () {
return '';
}
}
}, {
fields: 'att_red',
position: 'left',
type: 'Category'
}
],
series: [
{
axis: 'bottom',
type: 'bar',
xField: 'att_red',
yField: 'att_value'
}
],
store: {
fields: ['att_red', 'att_value'],
data: [
{att_red: 1, att_value: 2},
{att_red: 3, att_value: 4},
{att_red: 5, att_value: 6}
]
}
});

I also highly recommend using the Preview button to check your post before you post it. There's also an Edit link at the bottom of each post: if you do make a mistake you can always go back and change it. In your last post the code was a complete mess (you had nested code tags and all the indentation was lost).

While I was creating the test case above I discovered the cause of the problem. When I removed this section everything worked fine:


label: {
renderer: function () {
return '';
}
}

This is a good example of why you should always produce a proper minimal test case, it often leads you to the cause of the problem.

As far as I can tell this is a bug in ExtJS. Replacing the empty string with a space doesn't fix it either. I had to resort to a non-breaking space:


renderer: function () {
return '\u00A0';
}

This worked fine but you will get a small gap at the bottom of the chart. Perhaps there's a better way to remove these labels but I'm not sure what that would be.

Bokara
16 Oct 2011, 10:46 AM
Thanks a lot! I have edited my previous thread so at least it looks like something.
I will use the preview button and edit button now.
I am new in this but that is not an excuse for me not to use this before.

I realized that the problem is in this line:



label: {
renderer: function (a, f) {
return '\u00A0';
}
}


but i did not wonted to send the new thread because i did not have the solution for that line.
And your solution is great!
Thanks!

mike1993
23 Jan 2014, 8:58 AM
It's been over 2 years since that bug has been discovered and it's still there. Got my charts messed up in Opera and found this thread.
Thanks for the solution!



Opera:
Version 12.16
Build 1860
Platform Win32
System Windows 7

ExtJs - 4.2