1. #1
    Sencha User
    Join Date
    Jun 2009
    Posts
    14
    Vote Rating
    1
    KartoPete is on a distinguished road

      0  

    Default Unanswered: ExtJs 4.0.2a / 4.0.7 - Charting

    Unanswered: ExtJs 4.0.2a / 4.0.7 - Charting


    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

  2. #2
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,114
    Answers
    83
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


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

  3. #3
    Sencha User
    Join Date
    Jun 2009
    Posts
    14
    Vote Rating
    1
    KartoPete is on a distinguished road

      0  

    Default


    Quote Originally Posted by tvanzoelen View Post
    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 },...
    ]
    }

  4. #4
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,114
    Answers
    83
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    *bump*

    I think this

    Code:
    { "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?

  5. #5
    Sencha User
    Join Date
    Jun 2009
    Posts
    14
    Vote Rating
    1
    KartoPete is on a distinguished road

      0  

    Default


    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.

  6. #6
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,114
    Answers
    83
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


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

  7. #7
    Sencha User
    Join Date
    Jun 2009
    Posts
    14
    Vote Rating
    1
    KartoPete is on a distinguished road

      0  

    Default


    Did already try defferedRender: false but without success.

  8. #8
    Sencha User
    Join Date
    Jun 2009
    Posts
    14
    Vote Rating
    1
    KartoPete is on a distinguished road

      0  

    Default Issue fixed...it seems

    Issue fixed...it seems


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

    PHP Code:
       deferredRenderfalse,
       
    layoutOnTabChangetrue,
       
    flex1,
       
    defaults:{hideMode'offsets'}, 
    and the chart itself needs at least

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

    Cheers!
    Pete

  9. #9
    Sencha User
    Join Date
    Jan 2008
    Posts
    194
    Answers
    2
    Vote Rating
    0
    Richie1985 is on a distinguished road

      0  

    Default


    thank you so much for this fix

  10. #10
    Sencha User fischel's Avatar
    Join Date
    Sep 2007
    Location
    Berlin
    Posts
    4
    Vote Rating
    0
    fischel is on a distinguished road

      0  

    Default


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

    PHP Code:
       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 !!

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."