1. #1
    Sencha User
    Join Date
    Jul 2009
    Posts
    35
    Vote Rating
    1
    MrRoyce is on a distinguished road

      0  

    Default [UNKNOWN][3.??] Cross browser problem with Chart/FF - works in IE, Chrome

    [UNKNOWN][3.??] Cross browser problem with Chart/FF - works in IE, Chrome


    Hi there, I ran into a cross broswer issue today where my linechart did not display in FF 3.5, but showed fine in IE 8 and Chrome 2.0 - I tracked the difference down to the height not being specified for a container. In my 'createDataContaner' function, if I don't specify the height, then the chart displays correctly in IE and Chrome, but I have to have the height in order for the chart to display in FF.

    Here is sample code:

    Code:
    // Factories  
    
    function createSummaryLayout(config) {
        return new Ext.Panel(Ext.apply({
            baseCls:'x-plain',
            layout:'table',
            layoutConfig: {columns:1},
            // applied to child components
            defaults: {frame:true, width:860, height: 220}
        }, config));
    };
    
    
    function createDataContaner(config) {
        return new Ext.Container(Ext.apply({
            width: 860
            //,height: 220
        }, config));
    };
    
    
    Ext.onReady(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 roi_container = createDataContaner({
                    
                    items: {
                        xtype: 'linechart',
                        store: store,
                        xField: 'name',
                        yField: 'visits',
                        yAxis: new Ext.chart.NumericAxis({
                            displayName: 'Visits',
                            labelRenderer : Ext.util.Format.numberRenderer('0,0')
                        })
    
                    }
                });         
                
                var ecommerce_summary_panel = createSummaryLayout({ 
                    region: 'center',
                    autoHeight: true,
                    
                    items:[{
                            title:'ROI',
                            items:[
                                roi_container
                            ]
                        }]
                });            
            
                var ecomm_win = new Ext.Window({
                    title: 'Analytical Data',
                    id : 'ecomm_win',
                    width: 890,
                    height: 600,
                    layout: 'border',
                    items: [ecommerce_summary_panel]
                    });
    
                ecomm_win.show(this);
            });

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,008
    Vote Rating
    650
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Not a bug, moving to help.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Touch Premium Member
    Join Date
    Sep 2008
    Location
    Orange County, CA, USA
    Posts
    186
    Vote Rating
    0
    Jack9 is on a distinguished road

      0  

    Default


    This code looks fine to me. In testing, there's no problem in FireFox3.5.2 but there is in IE6 where no height = 0 height. Also I converted the JsonStore to a SimpleStore since there's no point in calling it a JsonStore.

    I do think there's a little too much nesting.

    var roi_container = createDataContaner({
    items: {
    xtype: 'linechart',
    store: store,
    xField: 'name',
    yField: 'visits',
    yAxis: new Ext.chart.NumericAxis({
    displayName: 'Visits',
    labelRenderer : Ext.util.Format.numberRenderer('0,0')
    })
    }
    });

    This is a variable that's storing a reference to a panel with 1 item (a linechart) in it, returned from a function. Why is there an implicit panel at all? You can apply your height/width to a linechart component IIRC. Why not set the height/width in a variable set at the beginning? I dunno.
    Last edited by Jack9; 31 Aug 2009 at 9:54 AM. Reason: Whoops forgot the store edit

  4. #4
    Sencha User
    Join Date
    Jul 2009
    Posts
    35
    Vote Rating
    1
    MrRoyce is on a distinguished road

      0  

    Default


    Hi there, thanks for your reply. The code I posted was a quickly stripped down sample from a much larger program. Its odd that you didn't get the same result with FF 3.5.2. I tested it witth 2 seperate machines and both had the same result. I am jsut learning this stuff so thanks for your suggestions.

Thread Participants: 2