You found a bug! We've classified it as CHARTS-200 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Dec 2008
    Location
    Munich (Bavaria/Germany)
    Posts
    291
    Vote Rating
    1
    defcon1 is on a distinguished road

      0  

    Default Chart confusion in Tabs

    Chart confusion in Tabs


    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:


    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
    Checkout Apollo, an ExtJS4-based Apache Cassandra client: http://www.codefreun.de/en/apollo-en

  2. #2
    Sencha User
    Join Date
    Dec 2008
    Location
    Munich (Bavaria/Germany)
    Posts
    291
    Vote Rating
    1
    defcon1 is on a distinguished road

      0  

    Default


    Did someone have a look at it ... ?
    Checkout Apollo, an ExtJS4-based Apache Cassandra client: http://www.codefreun.de/en/apollo-en

  3. #3
    Sencha User
    Join Date
    Dec 2008
    Location
    Munich (Bavaria/Germany)
    Posts
    291
    Vote Rating
    1
    defcon1 is on a distinguished road

      0  

    Default


    Bump ...
    Checkout Apollo, an ExtJS4-based Apache Cassandra client: http://www.codefreun.de/en/apollo-en

  4. #4
    Sencha User
    Join Date
    Dec 2008
    Location
    Munich (Bavaria/Germany)
    Posts
    291
    Vote Rating
    1
    defcon1 is on a distinguished road

      0  

    Default


    Checkout Apollo, an ExtJS4-based Apache Cassandra client: http://www.codefreun.de/en/apollo-en

  5. #5
    Sencha - Support Team mike.estes's Avatar
    Join Date
    Mar 2011
    Location
    Redwood City, CA
    Posts
    220
    Vote Rating
    8
    mike.estes will become famous soon enough

      0  

    Default


    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.

  6. #6
    Sencha User
    Join Date
    Dec 2008
    Location
    Munich (Bavaria/Germany)
    Posts
    291
    Vote Rating
    1
    defcon1 is on a distinguished road

      0  
    Checkout Apollo, an ExtJS4-based Apache Cassandra client: http://www.codefreun.de/en/apollo-en

  7. #7
    Sencha User
    Join Date
    Dec 2008
    Location
    Munich (Bavaria/Germany)
    Posts
    291
    Vote Rating
    1
    defcon1 is on a distinguished road

      0  

    Default


    Bump ... I updated first posting with the required template.
    Checkout Apollo, an ExtJS4-based Apache Cassandra client: http://www.codefreun.de/en/apollo-en

  8. #8
    Sencha User
    Join Date
    Dec 2008
    Location
    Munich (Bavaria/Germany)
    Posts
    291
    Vote Rating
    1
    defcon1 is on a distinguished road

      0  

    Default


    Almost three weeks now and still no comment, senseless work what I am doing here ...
    Checkout Apollo, an ExtJS4-based Apache Cassandra client: http://www.codefreun.de/en/apollo-en

  9. #9
    Sencha User
    Join Date
    Dec 2008
    Location
    Munich (Bavaria/Germany)
    Posts
    291
    Vote Rating
    1
    defcon1 is on a distinguished road

      0  

    Default


    Quote Originally Posted by mike.estes View Post
    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
    Checkout Apollo, an ExtJS4-based Apache Cassandra client: http://www.codefreun.de/en/apollo-en

  10. #10
    Sencha User
    Join Date
    Dec 2008
    Location
    Munich (Bavaria/Germany)
    Posts
    291
    Vote Rating
    1
    defcon1 is on a distinguished road

      0  

    Default


    No changes with 4.0.6
    Checkout Apollo, an ExtJS4-based Apache Cassandra client: http://www.codefreun.de/en/apollo-en

Thread Participants: 2

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