Chart confusion in Tabs

**defcon1** · 29 Jul 2011 12:53 AM

REQUIRED INFORMATION

Ext version tested:

Ext 4.02a

Browser versions tested against:

Chrome 13
IE8
IE9
FF5 (firebug 1.8 installed)
Safari 4

Description:

I have some tabs with charts in a tabpanel, the charts are updated via a thread, and as soon as a hidden panel updates the charts, the charts are showing trash. I already tried to redraw the charts, also a non-deferred rendering, but no effect. Problem seems to be FF5 specific.

Steps to reproduce the problem:

Use FF5 and call http://codefreun.de/extjs/chart.jsp
Switch several times between tabs
Charts get destroyed

The result that was expected:

Intact Charts

The result that occurs instead:

Destroyed layout in charts

Test Case:

Code:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert title here</title>
    
     <link id="extjs-theme-base" rel="stylesheet" type="text/css"  href="http://localhost/ext-4.0.2a/resources/css/ext-all.css">
    <script type="text/javascript" src="http://localhost/ext-4.0.2a/bootstrap.js"></script>

    <script type="text/javascript">
    
        Ext.onReady(function(){
             
            
            // Panel for showing chart of used heap
            Ext.define ('genericLineChart', {

                extend: 'Ext.panel.Panel',    
                autoScroll: false,
                frame: true,
                layout: 'fit',
                data: [],
                generateData: function() {
                    
                    this.data.push({
                        DateTime: Math.random() * 100,
                        HeapUsed: Math.random() * 50
                    });
                },
                constructor: function (cfg) {

                    // apply cfg to class
                    Ext.apply (this, cfg);

                    this.loadChartData = function () {

                        this.generateData();
                        this.store.loadData(this.data);
                    };

                    
                    this.store = Ext.create ('Ext.data.Store', {
                        
                        fields: ['DateTime','HeapUsed'],
                        proxy: {
                            type: 'memory',
                            reader: {
                                type: 'json'
                            }
                        }
                    }); 
                        

                    var chart = Ext.create ('Ext.chart.Chart', {

                        style: 'background:#fff',
                        animate: true,
                        store: this.store,
                        shadow: true,
                        theme: 'Category1',
                        axes: [{
                            type: 'Numeric',
                            minimum: 0,
                            maximum: 100,
                            position: 'left',
                            fields: ['HeapUsed'],
                            title: 'MByte',
                            minorTickSteps: 1,
                            grid: {
                                odd: {
                                    opacity: 1,
                                    fill: '#ddd',
                                    stroke: '#bbb',
                                    'stroke-width': 0.5
                                }
                            }
                        }, {
                            type: 'Category',
                            position: 'bottom',
                            fields: ['DateTime']
                            //,title: 'Month of the Year'
                        }],
                        series: [{
                            type: 'line',
                            axis: 'left',
                            xField: 'DateTime',
                            yField: 'HeapUsed'
                        }]
                    });
                    
                    
                    this.items = [chart];

                    // call super constructor
                    this.callParent();
                }
            });
            
            
            // Generate widget
            var chart1 = Ext.create('genericLineChart', {});
            var panel1 = Ext.create ('Ext.panel.Panel', {
                
                title: 'My Chart',
                width: 500,
                height: 300,
                layout: 'fit',
                items: [
                    chart1                        
                ]
            });


            // Generate widget
            var chart2 = Ext.create('genericLineChart', {});
            var panel2 = Ext.create ('Ext.panel.Panel', {
                
                title: 'My Chart',
                layout: 'fit',
                items: [
                    chart2
                ]
            });

            
            var _tabpanel = Ext.create ('Ext.tab.Panel', {

                renderTo: Ext.getBody(),
                width: 500,
                height: 300,
                layout: 'fit',
                items: [
                    panel1,
                    panel2
                ]
            });
            _tabpanel.setActiveTab(panel1);
            

            
            // Thread to load the data
            loadTask = function() {
                
                chart1.loadChartData();
                chart1.loadChartData();
                chart2.loadChartData();
                chart2.loadChartData();
            };
            
            this.runningTask = Ext.TaskManager.start ({

                run: loadTask,
                interval: 2000
            });
        });

    </script>
    
</head>

<body>
</body>
</html>

HELPFUL INFORMATION

Screenshot or Video:

attached

See this URL for live test case: http://codefreun.de/extjs/chart.jsp

Debugging already done:

none

Possible fix:

not provided

Additional CSS used:

only default ext-all.css

Operating System:

Win7 64bit

**defcon1** · 29 Jul 2011 9:22 AM

Did someone have a look at it ... ?

**defcon1** · 1 Aug 2011 11:51 AM

Bump ...

**defcon1** · 2 Aug 2011 11:33 AM

**mike.estes** · 2 Aug 2011 2:58 PM

could you fill out the bug template (including test case)

When we push these reports into our internal issue tracker a link is made back to the original report, so it is important to have all the info on one page in this specific format.

**defcon1** · 9 Aug 2011 10:35 AM

And here it is: http://www.sencha.com/forum/showthre...l=1#post635129

**defcon1** · 11 Aug 2011 9:19 AM

Bump ... I updated first posting with the required template.

**defcon1** · 16 Aug 2011 4:13 AM

Almost three weeks now and still no comment, senseless work what I am doing here ...

**defcon1** · 26 Aug 2011 5:08 AM

Originally Posted by mike.estes

could you fill out the bug template (including test case)

When we push these reports into our internal issue tracker a link is made back to the original report, so it is important to have all the info on one page in this specific format.

And here it is ....

See first posting

**defcon1** · 23 Sep 2011 12:14 AM

No changes with 4.0.6

Chart confusion in Tabs

Thread Tools

Search Thread

Display

Chart confusion in Tabs

Chart confusion in Tabs