ExtJs 4.0.2a / 4.0.7 - Charting

[KartoPete]

I have a Tabpanel with a panel (containing a chart and a grid) inside each tab. In 4.0.2a I had all charts rendered in Firefox and Chrome. In 4.0.7 chrome wouldn't render the content of the tabs(charts and grids), -> white page.
As well, in 4.0.2a the charts do render correct on the initial load, if the store's data has changed, the hidden tabs render incorrect, I guess as the sizes of the charts are gone. Therefore only the axis labels are rendered.
The console is showing errors like:
"Unexpected value NaN parsing x attribute." I think for each SVG vector.

Is there a way to prevent this? I tried specifing explicit height and width of the chart, but didn't change anything.
Any idea's?
Cheers,
Pete

[tvanzoelen]

Can you post the vectors with the chart data. How did you code them in the array?

[KartoPete]

Can you post the vectors with the chart data. How did you code them in the array?

This is the SVG vectors:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="738" height="414" id="ext-gen1511" style="width: 738px; height: 414px;"><defs/><rect width="100%" height="100%" fill="#000" stroke="none" opacity="0" id="ext-gen1512"/><rect id="ext-sprite-1513" zIndex="0" x="0" y="0" width="738" height="414" fill="rgb(255, 255, 255)" hidden="false" ry="0" rx="0" transform="matrix(1,0,0,1,0,0)"/><path id="ext-sprite-1682" zIndex="0" d="" stroke="#444" stroke-width="1" fill="none" transform="matrix(1,0,0,1,0,0)"/><text id="ext-sprite-1683" style="font: 12px Arial,Helvetica,sans-serif;" zIndex="0" x="-18.671875" y="414" text="0" fill="#444" font="12px Arial, Helvetica, sans-serif" text-anchor="start" transform="matrix(1,0,0,1,0,0)" hidden="true" class=" x-hide-visibility"><tspan x="-18.671875" dy="0">0</tspan></text><text id="ext-sprite-1684" style="font: 12px Arial,Helvetica,sans-serif;" zIndex="0" x="-18.671875" y="372" text="7" fill="#444" font="12px Arial, Helvetica, sans-serif" text-anchor="start" transform="matrix(1,0,0,1,0,0)" hidden="true" class=" x-hide-visibility"><tspan x="-18.671875" dy="0">7</tspan></text><rect id="ext-sprite-1850" zIndex="0" stroke-width="4px" stroke-opacity="0.1" stroke="rgb(150,150,150)" x="0" y="0" width="0" height="0" hidden="false" fill="rgb(255,255,0)" ry="0" rx="0" transform="matrix(1,0,0,1,0.9,0.9)"/><rect id="ext-sprite-1852" zIndex="0" stroke-width="2px" stroke-opacity="0.15" stroke="rgb(100,100,100)" x="0" y="0" width="0" height="0" hidden="false" fill="rgb(255,255,0)" ry="0" rx="0" transform="matrix(1,0,0,1,0.6,0.6)"/><rect id="ext-sprite-1854" zIndex="0" fill="rgb(255,255,0)" height="0" width="0" x="0" y="0" stroke-width="0px" hidden="false" ry="0" rx="0" transform="matrix(1,0,0,1,0,0)"/><rect id="ext-sprite-1856" zIndex="0" stroke-width="6px" stroke-opacity="0.05" stroke="rgb(200,200,200)" x="0" y="0" width="0" height="0" hidden="false" fill="rgb(255,255,0)" ry="0" rx="0" transform="matrix(1,0,0,1,1,1)"/><rect id="ext-sprite-1858" zIndex="0" stroke-width="4px" stroke-opacity="0.1" stroke="rgb(150,150,150)" x="0" y="0" width="0" height="0" hidden="false" fill="rgb(255,255,0)" ry="0" rx="0" transform="matrix(1,0,0,1,0.9,0.9)"/><rect id="ext-sprite-1860" zIndex="0" stroke-width="2px" stroke-opacity="0.15" stroke="rgb(100,100,100)" x="0" y="0" width="0" height="0" hidden="false" fill="rgb(255,255,0)" ry="0" rx="0" transform="matrix(1,0,0,1,0.6,0.6)"/><rect id="ext-sprite-1862" zIndex="0" fill="rgb(255,255,0)" height="0" width="0" x="0" y="0" stroke-width="0px" hidden="false" ry="0" rx="0" transform="matrix(1,0,0,1,0,0)"/><rect id="ext-sprite-1864" zIndex="0" stroke-width="6px" stroke-opacity="0.05" stroke="rgb(200,200,200)" x="0" y="0" width="0" height="0" hidden="false" fill="rgb(255,255,0)" ry="0" rx="0" transform="matrix(1,0,0,1,1,1)"/><rect id="ext-sprite-1866" zIndex="0" stroke-width="4px" stroke-opacity="0.1" stroke="rgb(150,150,150)" x="0" y="0" width="0" height="0" hidden="false" fill="rgb(255,255,0)" ry="0" rx="0" transform="matrix(1,0,0,1,0.9,0.9)"/><rect id="ext-sprite-1868" zIndex="0" stroke-width="2px" stroke-opacity="0.15" stroke="rgb(100,100,100)" x="0" y="0" width="0" height="0" hidden="false" fill="rgb(255,255,0)" ry="0" rx="0" transform="matrix(1,0,0,1,0.6,0.6)"/><rect id="ext-sprite-1870" zIndex="0" fill="rgb(255,255,0)" height="0" width="0" x="0" y="0" stroke-width="0px" hidden="false" ry="0" rx="0" transform="matrix(1,0,0,1,0,0)"/><rect id="ext-sprite-1872" zIndex="0" stroke-width="6px" stroke-opacity="0.05" stroke="rgb(200,200,200)" x="0" y="0" width="0" height="0" hidden="false" fill="rgb(255,255,0)" ry="0" rx="0" transform="matrix(1,0,0,1,1,1)"/>...</svg>

And the data is coded like this to feed the store with proxy settings root:'stat'

{ "stat": [ { "attrA": 23, "attrB": 3,
"attrC": 12 },
{ "attrA": 3, "attrB": 23,
"attrC": 65 },...
]
}

[tvanzoelen]

*bump*

I think this

{ "stat": [ { "attrA": 23, "attrB": 3,
"attrC": 12 },
{ "attrA": 3, "attrB": 23,
"attrC": 65 },...
]
}

is more interesting to know than the svg data. Is the data in the stat array correct?

[KartoPete]

Yes the data is correct as it is displayed at the first time, only when the store is reloaded I get the problem for tabs which are not displayed at the time.
And actually I just discovered that the SVG is important, cause...

... as you see, the vectors are there, but I just realized that all of the classes attributes are set to:
class=" x-hide-visibility"

I don't know why, but if I change this classes in Firebug, this elements become visible. So the question is why Ext is setting this classes to a hide mode one.

[tvanzoelen]

Mayby you can try to set deferredRender on false on the tabpanel.

[KartoPete]

Did already try defferedRender: false but without success.

[KartoPete]

I found a solution, which works for me, at least in Firefox and Chrome, so far.
The tabpanel needs the following attributes:

   deferredRender: false,
   layoutOnTabChange: true,
   flex: 1,
   defaults:{hideMode: 'offsets'}, 

and the chart itself needs at least

   hideMode: 'offsets' 

This thing took me 2,5 days now, with side excursions to Highcharts with ExtJS 4.
Now I fall asleep :-)

Cheers!
Pete

[Richie1985]

thank you so much for this fix

[fischel]

thank you very much! this save me a lot of time

   defaults:{hideMode: 'offsets'}, 

I work with SVG-graphics in tabs. Only in chrome the svg were reloaded after I change a tab. With this default it works !!