Results 1 to 10 of 10

Thread: Destroying chart in IE

  1. #1
    Ext User
    Join Date
    Oct 2008
    Posts
    20

    Default Destroying chart in IE

    My application has a viewport which contains two panels, upper for menu and lower for content. When I click on menu, the contents of lower panel will be changed (old items will be removed and new ones added).
    In Firefox everything works fine, but in IE when removing panel which contains Ext.chart objects I get an error something like "null is null or not an object" and when I try to readd that chart afterwards, it will not display (no axis, no data, just blank flash object).
    Is there a solution to that problem?

  2. #2
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    Can you provide either code (in code tags) or an online test case for this issue?

  3. #3
    Ext User
    Join Date
    Oct 2008
    Posts
    20

    Default

    Here you go. It is not my exact code which is more complicated, but just a simple test case and it gives the same errors and has the same behaviour. Works in FF, gives error in IE.

    Code:
    <html>
        <link rel="stylesheet" type="text/css" href="/ext/resources/css/ext-all.css" /> 
        <script type="text/javascript" src="/ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="/ext/ext-all.js"></script>
        <script type="text/javascript">
        Ext.ns('Testing');
        
        // Chart Panel
        Testing.ChartPanel = Ext.extend(Ext.Panel,{
            initComponent: function() {
                var store = new Ext.data.JsonStore({
                    fields:['name', 'visits', 'views'],
                    data: [
                        {name:'Jul 07', visits: 245000, views: 3000000},
                        {name:'Aug 07', visits: 240000, views: 3500000},
                        {name:'Sep 07', visits: 355000, views: 4000000},
                        {name:'Oct 07', visits: 375000, views: 4200000},
                        {name:'Nov 07', visits: 490000, views: 4500000},
                        {name:'Dec 07', visits: 495000, views: 5800000},
                        {name:'Jan 08', visits: 520000, views: 6000000},
                        {name:'Feb 08', visits: 620000, views: 7500000}
                    ]
                });
            
                var config = {  
                    width:500,
                    height:300,
                    title: 'Page 1',
                    layout:'fit',
                    items: {
                        xtype: 'linechart',
                        store: store,
                        xField: 'name',
                        yField: 'visits'
                    }
                };
                
                Ext.apply(this, Ext.apply(this.initialConfig, config));
                Testing.ChartPanel.superclass.initComponent.apply(this, arguments);
            }
        });
        Ext.reg('testchartpanel',Testing.ChartPanel);
    
        // Normal Panel
        Testing.NormalPanel = Ext.extend(Ext.Panel,{
            initComponent: function() {
                var config = {
                    title: 'Page 2',
                    html: 'nothing here'
                };
                
                Ext.apply(this, Ext.apply(this.initialConfig, config));
                Testing.NormalPanel.superclass.initComponent.apply(this, arguments);
            }
        });
        Ext.reg('testnormalpanel',Testing.NormalPanel);
    
        // Viewport
        Testing.MainViewport = Ext.extend(Ext.Viewport,{
            initComponent: function() {
                var config = {
                    layout: 'border',
                    items: [{
                        xtype: 'panel',
                        region: 'north',
                        height: 100,
                        items: [{
                            xtype:'button',
                            scope: this,
                            scale: 'large',
                            text: 'load page 1',
                            handler: function() {
                                this.loadPage('one');
                            }
                        },{
                            xtype:'button',
                            scope: this,
                            scale: 'large',
                            text: 'load page 2',
                            handler: function () {
                                this.loadPage('two');
                            }
                        }]
                    },{
                        xtype: 'panel',
                        region: 'center'
                    }]
                };
                   
                Ext.apply(this, Ext.apply(this.initialConfig, config));
                Testing.MainViewport.superclass.initComponent.apply(this, arguments);
                
                this.contentPanel = this.items.itemAt(1);
            },
            loadPage: function(page) {
                if (this.contentPanel.items) this.contentPanel.remove(this.contentPanel.items.itemAt(0));
    
                switch (page) {
                    case 'one':
                        this.contentPanel.add({xtype:'testchartpanel'});
                        break;
                    case 'two':
                        this.contentPanel.add({xtype:'testnormalpanel'});
                        break;
                    default:
                        this.contentPanel.add({xtype:'panel',html:'wrong selection'});
                        break;
                }
                this.doLayout();
            }    
        });
    
        Ext.onReady(function(){
            var mvp = new Testing.MainViewport();
            mvp.loadPage('one');
        });
        </script>
    
        <body>
        </body>
    </html>

  4. #4
    Ext User
    Join Date
    Oct 2008
    Posts
    20

    Default

    Another example:
    Goto http://extjs.com/deploy/ext-3.0-rc1....rt/charts.html with IE and click Enter on urlbar to refresh the page. There will be no data displayed.

  5. #5
    Ext User
    Join Date
    Mar 2009
    Location
    Sinaloa, Mxico
    Posts
    102

    Exclamation

    This happend with almost all the new examples

    On IE 7 and 8 build 7100 you can see all samples, but when you press refresh (F5) then are gone

    And with FF 3.0.10 i can't open this example http://extjs.com/deploy/ext-3.0-rc1....rt/charts.html is just blank (didn't check the others samples)

    Where the team test the samples ? IE6 ?

  6. #6

    Default Destroying chart in IE

    does any one have a solution for this, something happen with the cache on the charts in ext 3.0, i delete the ie historical, cache etc and shows the chart, please help

  7. #7

    Thumbs up

    There's a simple solution to this problem. When you set the url config use this syntax:

    Code:
    url: '../charts.swf?nocache=' + Math.floor(Math.random()*10000),
    In this way IE doesn't cache the file and always load the data.
    Notizie sempre aggiornate? NetNotizie.net

  8. #8

    Default Destroying chart in IE

    it works!! thanks a lot

  9. #9
    Ext User
    Join Date
    Mar 2009
    Location
    Sinaloa, Mxico
    Posts
    102

    Default

    pezze, i use that trick on all my old ajax stuff (non-extjs) and i totally forgot

    Thanks

  10. #10

    Default Destroying chart in IE

    did you know why did not work with the pie chart? still get destroy but isn't cache problem
    Code:
    {
                        title: 'Max Dashboard, $Billed vs $Payed',
                        
                        iconCls:'chart',
                    
                        tools: tools,
                        items:  {
                 xtype: 'piechart',              
               store: hoursbilledvspayDataStore,
               height: 200,
                layout:'fit',
                
                url:'../../resources/charts.swf?nocache=' + Math.floor(Math.random()*10000),
                 dataField: 'billed', //la informacin a graficar   
                 categoryField : 'Name' //las etiquetas o categoras   
    
                
    }
                    }

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •