1. #1
    Sencha Premium Member
    Join Date
    Jan 2011
    Location
    New Hampshire, USA
    Posts
    14
    Vote Rating
    1
    fitzman49 is on a distinguished road

      0  

    Default Switching tabs with lots of child panels results in me.labels undefined error

    Switching tabs with lots of child panels results in me.labels undefined error


    Hi All,

    I've been experiencing an issue where I have a TabPanel which contains lots of content (eg 10 charts per panel). While the charts are rendering in the first tab I click on another tab and the following error occurs:
    Code:
    Message: me.labels[inflections.length - 1] is undefined<br />Name: TypeError<br />Line #:85620<br />File Name:https://localhost:8443/App/extjs/ext-all-debug-w-comments.js
    My guess is when I click on the second tab charts are being rendered and then some synchronization issue occurs where the labels for some of the charts are not completely populated in the labels array for the chart. This seems to happen in only in Firefox. I've tested in IE9 and Chome as well with no issues. I'm running EXT 4.1.

    Would anyone be able to shed some light on what may be happening?
    Last edited by fitzman49; 15 May 2012 at 12:26 PM. Reason: Fixed affected browsers

  2. #2
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,337
    Vote Rating
    75
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Can you post something that allows us to reproduce this?

  3. #3
    Sencha Premium Member
    Join Date
    Jan 2011
    Location
    New Hampshire, USA
    Posts
    14
    Vote Rating
    1
    fitzman49 is on a distinguished road

      0  

    Default


    Quote Originally Posted by jay@moduscreate.com View Post
    Can you post something that allows us to reproduce this?
    Hi Jay,

    Thanks for the quick response. Below is the TabPanel source but there isn't much going on in there.

    Code:
    Ext.define('NacNavTabPanel', {    extend: 'Ext.tab.Panel',
        alias: 'widget.nacNavTabPanel',
        border: false,
        initComponent: function() {
            this.callParent(arguments);
        },
        constructor: function() {
            var items = [];
                
                items.push(           {
                    title: 'Tab 1',
                    layout: 'fit',
                    closable: false,
                    border: false,
                    bodyBorder: false,
                    items: [
                        //Panel with lots of charts created dynamically
                    ]
                },{
                    title: 'Tab 2',
                    layout: 'fit',
                    closable: false,
                    border: false,
                    bodyBorder: false,
                    items: [
                        //Panel with lots of charts created dynamically
                    ]
                },{
                    title: 'Tab 3',
                    layout: 'fit',
                    closable: false,
                    border: false,
                    bodyBorder: false,
                    items: [
                        //Panel with lots of charts created dynamically
                    ]
                });
            
    
    
                var tab4 = Ext.create('Ext.panel.Panel', {
                    title: 'Tab 4',
                    layout: 'fit',
                    closable: false,
                    border: false,
                    bodyBorder: false,
                    itemId: 'tab4'
                });
                items.push(tab4);
    
    
    
    
                items.push({
                    title: 'Tab 5',
                    layout: 'fit',
                    closable: false,
                    border: false,
                    bodyBorder: false,
                    items: [
                        //Panel with lots of charts created dynamically
                    ]
                });
    
    
            
            var tbConfig = {
                items: items
            };
    
    
            Ext.applyIf(tbConfig, 
            {
                id:'nac-nav-tabpanel',
                plain: true,
                border: false,
                cls: 'secondaryNavTabPanel',
                layout: 'fit'
            });
            
            this.callParent([tbConfig]);
        }
    });
    My real question is there a way to throw a load mask on the TabPanel which will wait until all the child components have been fully rendered in the first tab and removing it once complete? I hope this makes sense. Thanks again in advance.

  4. #4
    Sencha Premium Member
    Join Date
    Jan 2011
    Location
    New Hampshire, USA
    Posts
    14
    Vote Rating
    1
    fitzman49 is on a distinguished road

      0  

    Default


    Upon further investigation it looks this error occurs while trying to render labels for a line chart I have in tab 1. When I switch back to tab 1 the line chart is not rendered correctly.

    authTypesChart.png

    It looks to be failing in this chunk of code in EXT:
    Code:
        /**
         * Renders the axis into the screen and updates its position.
         */
        drawAxis: function (init) {
            var me = this,
                i, j,
                x = me.x,
                y = me.y,
                gutterX = me.chart.maxGutter[0],
                gutterY = me.chart.maxGutter[1],
                dashSize = me.dashSize,
                subDashesX = me.minorTickSteps || 0,
                subDashesY = me.minorTickSteps || 0,
                length = me.length,
                position = me.position,
                inflections = [],
                calcLabels = false,
                stepCalcs = me.applyData(),
                step = stepCalcs.step,
                steps = stepCalcs.steps,
                from = stepCalcs.from,
                to = stepCalcs.to,
                trueLength,
                currentX,
                currentY,
                path,
                prev,
                dashesX,
                dashesY,
                delta;
    
    
            //If no steps are specified
            //then don't draw the axis. This generally happens
            //when an empty store.
            if (me.hidden || isNaN(step) || (from > to)) {
                return;
            }
    
    
            me.from = stepCalcs.from;
            me.to = stepCalcs.to;
    
    
            if (position == 'left' || position == 'right') {
                currentX = Math.floor(x) + 0.5;
                path = ["M", currentX, y, "l", 0, -length];
                trueLength = length - (gutterY * 2);
            }
            else {
                currentY = Math.floor(y) + 0.5;
                path = ["M", x, currentY, "l", length, 0];
                trueLength = length - (gutterX * 2);
            }
    
    
            // Supports the case that we have only 1 record.
            delta = steps && trueLength / steps;
            dashesX = Math.max(subDashesX + 1, 0);
            dashesY = Math.max(subDashesY + 1, 0);
            if (me.type == 'Numeric' || me.type == 'Time') {
                calcLabels = true;
                me.labels = [stepCalcs.from];
            }
    
    
            if (position == 'right' || position == 'left') {
                currentY = y - gutterY;
                currentX = x - ((position == 'left') * dashSize * 2);
                while (currentY >= y - gutterY - trueLength) {
                    path.push("M", currentX, Math.floor(currentY) + 0.5, "l", dashSize * 2 + 1, 0);
                    if (currentY != y - gutterY) {
                        for (i = 1; i < dashesY; i++) {
                            path.push("M", currentX + dashSize, Math.floor(currentY + delta * i / dashesY) + 0.5, "l", dashSize + 1, 0);
                        }
                    }
                    inflections.push([ Math.floor(x), Math.floor(currentY) ]);
                    currentY -= delta;
    
    
                    if (calcLabels) {
                        me.labels.push(me.labels[me.labels.length - 1] + step);
                    }
    
    
                    if (delta === 0) {
                        break;
                    }
                }
                if (Math.round(currentY + delta - (y - gutterY - trueLength))) {
                    path.push("M", currentX, Math.floor(y - length + gutterY) + 0.5, "l", dashSize * 2 + 1, 0);
                    for (i = 1; i < dashesY; i++) {
                        path.push("M", currentX + dashSize, Math.floor(y - length + gutterY + delta * i / dashesY) + 0.5, "l", dashSize + 1, 0);
                    }
                    inflections.push([ Math.floor(x), Math.floor(currentY) ]);
                    if (calcLabels) {
                        me.labels.push(me.labels[me.labels.length - 1] + step);
                    }
                }
            } else {
                currentX = x + gutterX;
                currentY = y - ((position == 'top') * dashSize * 2);
                while (currentX <= x + gutterX + trueLength) {
                    path.push("M", Math.floor(currentX) + 0.5, currentY, "l", 0, dashSize * 2 + 1);
                    if (currentX != x + gutterX) {
                        for (i = 1; i < dashesX; i++) {
                            path.push("M", Math.floor(currentX - delta * i / dashesX) + 0.5, currentY, "l", 0, dashSize + 1);
                        }
                    }
                    inflections.push([ Math.floor(currentX), Math.floor(y) ]);
                    currentX += delta;
                    if (calcLabels) {
                        me.labels.push(me.labels[me.labels.length - 1] + step);
                    }
                    if (delta === 0) {
                        break;
                    }
                }
                if (Math.round(currentX - delta - (x + gutterX + trueLength))) {
                    path.push("M", Math.floor(x + length - gutterX) + 0.5, currentY, "l", 0, dashSize * 2 + 1);
                    for (i = 1; i < dashesX; i++) {
                        path.push("M", Math.floor(x + length - gutterX - delta * i / dashesX) + 0.5, currentY, "l", 0, dashSize + 1);
                    }
                    inflections.push([ Math.floor(currentX), Math.floor(y) ]);
                    if (calcLabels) {
                        me.labels.push(me.labels[me.labels.length - 1] + step);
                    }
                }
            }
    
    
            // the label on index "inflections.length-1" is the last label that gets rendered
            if (calcLabels) {
                me.labels[inflections.length - 1] = +(me.labels[inflections.length - 1]).toFixed(10);
            }
    
    
            if (!me.axis) {
                me.axis = me.chart.surface.add(Ext.apply({
                    type: 'path',
                    path: path
                }, me.axisStyle));
            }
            me.axis.setAttributes({
                path: path
            }, true);
            me.inflections = inflections;
            if (!init && me.grid) {
                me.drawGrid();
            }
            me.axisBBox = me.axis.getBBox();
            me.drawLabel();
        },
    Specifically on this line:
    Code:
            // the label on index "inflections.length-1" is the last label that gets rendered
            if (calcLabels) {
                me.labels[inflections.length - 1] = +(me.labels[inflections.length - 1]).toFixed(10);
            }
    Any help is appreciated.

  5. #5
    Sencha User
    Join Date
    Jun 2009
    Posts
    7
    Vote Rating
    0
    srininara is on a distinguished road

      0  

    Default Facing the same problem

    Facing the same problem


    I am also facing the same problem. Any help is appreciated.

  6. #6
    Sencha User
    Join Date
    Jun 2009
    Posts
    7
    Vote Rating
    0
    srininara is on a distinguished road

      0  

    Default Code that reproduces the problem to a certain extent

    Code that reproduces the problem to a certain extent


    I am attaching some sample code for reproducing the issue (sample code does not fail with the same error message as what is discussed here but the effect is similar. In my actual code I am getting the same error message as mentioned in the discussion).

    Steps for reproduction,
    - Open the page (the first tab is open)
    - Click on the first filter button. Graph changes
    - Navigate to other tabs (Graphs with filtered data get rendered nicely)
    - On the last tab, click on the second filter button
    - errors appear on firebug, No filtering visible on the graph
    - navigate the previous tabs (graph does not change on the second tab)
    - On the first tab, the graph is mangled with axes, grid and legend become invisible.

    Hope this helps in resolving this earlier.

    chart-play.zip

  7. #7
    Sencha User
    Join Date
    Jun 2009
    Posts
    7
    Vote Rating
    0
    srininara is on a distinguished road

      0  

    Default Working around by recreating the chart

    Working around by recreating the chart


    Since there is no response on this, I am going ahead with a workaround of recreating the charts again and adding them to the panels just before the store filtering.

  8. #8
    Sencha Premium Member
    Join Date
    Jan 2011
    Location
    New Hampshire, USA
    Posts
    14
    Vote Rating
    1
    fitzman49 is on a distinguished road

      0  

    Default


    Just upgraded to EXT 4.1.1RC1 and the issue still persists. Let me know if any more code is needed for anyone.

  9. #9
    Ext JS Premium Member anton.dimitrov's Avatar
    Join Date
    Nov 2011
    Location
    The Netherlands
    Posts
    123
    Vote Rating
    2
    anton.dimitrov is on a distinguished road

      0  

    Default


    +1 for the issue.

    I am facing the same problem when changing tabs and there are charts still to be drawn.
    If any info for reproducing the problem is required I will be more than happy to assist.

    Have you found any temporary solution?

    Regards,

    Anton

  10. #10
    Sencha Premium Member
    Join Date
    Oct 2011
    Posts
    3
    Vote Rating
    2
    EJ.Beauchamp is on a distinguished road

      1  

    Default Hack

    Hack


    So this is a complete hack but I was having the same error when I would load new data into a store... I don't know is this applicable to your current issue but I was able to get around this with the following solution:

    Code:
    var me = this;
    try {
        me.myChart.store.loadData(newData);
    } catch (err) {
        setTimeout(function() {
            me.myChart.redraw();
        },0);
    }

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar