Code not working on IPad Simulator whereas working fine on Safari/Crome

[pankymishr]

We developing POC for ipad device using the beta touch chart.It is working perfectly on Crome/Safari having agent set to the iPad. But when i run the application on Ipad simulator on MAC it stop working. blank screen is coming. Do i need to setup some configuration on simulator apart from setting Device as Ipad. Any Help is highly appreciated.

[Jamie Avins]

Which iOS is your simulator using? Running 4.3.2 on mine without issue going directly to our beta site.

Screen Shot 2011-08-02 at 11.15.38 AM.jpg

[pankymishr]

Hi Jamie.Thanks for ur reply. iOS is 4.3.2(8H4) . All Demo woking fine on my simulator too but the application that we developing working fine on safari/crome having agent as iPad but when i open my index.html page in simulator nothing is coming there.I do not have idea why application behaving weirdly on simulator where as it working fine on safari browser having agent as iPad.

[Jamie Avins]

Ah, I see. Not sure what that could be, are you sure you have all the necessary CSS loading and no errors? Some small sample code may help narrow it down.

[pankymishr]

Here is sample code that works fine on Safari and crome but it won't open properly on iPad simulator. Reason of not running this code on simulator would help me.

window.generateData1 = function(n, floor) {
            var data = [],
                p = (Math.random() * 11) + 1,
                i;

            floor = (!floor && floor !== 0) ? 20 : floor;

            for (i = 0; i < (n || 12); i++) {
                data.push({
                    name: Date.monthNames[i % 12],
                    2008: Math.floor(Math.max((Math.random() * 100), floor)),
                    2009: Math.floor(Math.max((Math.random() * 100), floor)),
                    2010: Math.floor(Math.max((Math.random() * 100), floor)),
                    data4: Math.floor(Math.max((Math.random() * 100), floor)),
                    data5: Math.floor(Math.max((Math.random() * 100), floor)),
                    data6: Math.floor(Math.max((Math.random() * 100), floor)),
                    data7: Math.floor(Math.max((Math.random() * 100), floor)),
                    data8: Math.floor(Math.max((Math.random() * 100), floor)),
                    data9: Math.floor(Math.max((Math.random() * 100), floor))
                });
            }
            return data;
        };
        window.store2 = new Ext.data.JsonStore({
            fields: ['name', '2008', '2009', '2010', 'data4', 'data5', 'data6', 'data7', 'data9', 'data9'],
            data: generateData1(5, 20)
        });

        var onRefreshTap = function() {
            window.store2.loadData(generateData(5, 20));
        };
        var onHelpTap = function() {
			new Ext.Panel({
 		          floating: true,
		           modal: true,
		           centered: true,
		           width: 300,
		           height: 250,
		           styleHtmlContent: true,
		           scroll: 'vertical',
		           dockedItems: [{
		               dock: 'top',
		               xtype: 'toolbar',
		               title: 'Bar Chart'
		           }],
		           stopMaskTapEvent: false,
		           fullscreen: false,
				   html: "This example's uses many interactions.<br><ul>" +
							"<li>A horizontal swipe will change between a grouped and stacked bar chart.</li>" +
							"<li>Tapping two items will overlay an arrow and show a comparison in the Title area.</li>" +
							"<li>The chart can be zoomed vertically with a pinch gesture, and the panned by dragging.  For devices which do not support multi-touch, an extra toggle button is made available to switch between pan and zoom.  When zoomed in, arrow indicators will be overlayed on the chart to show that more data is available</li>" +
							"<li>Double-Tap will reset the chart back to the initial state</li>"
		       }).show('pop');
		}

        var barPanel = new Ext.chart.Panel({
            title: 'Bar Chart',
            fullscreen: true,
            dockedItems: [{
                xtype: 'button',
                iconCls: 'help',
                iconMask: true,
                ui: 'plain',
                handler: onHelpTap
            }, {
				xtype: 'button',
				iconCls: 'shuffle',
				iconMask: true,
				ui: 'plain',
                handler: onRefreshTap
			}],
            items: {
                cls: 'bar1',
                theme: 'Demo',
                store: store2,
                animate: true,
                shadow: false,
                legend: {
                    position: {
                        portrait: 'right',
                        landscape: 'top'
                    },
                    labelFont: '17px Arial'
                },
                interactions: [{
                    type: 'reset'
                },
                {
                    type: 'togglestacked'
                },
                {
                    type: 'panzoom',
                    axes: {
                        left: {}
                    }
                },
                {
                    type: 'iteminfo',
                    gesture: 'taphold',
                    panel: {
                        dockedItems: [{
                            dock: 'top',
                            xtype: 'toolbar',
                            title: 'Details'
                        }],

                        html: 'Testing'
                    },
                    listeners: {
                        'show': function(me, item, panel) {
                            panel.update('<ul><li><b>Month:</b> ' + item.value[0] + '</li><li><b>Value: </b> ' + item.value[1] + '</li></ul>');
                        }
                    }
                },
                {
                    type: 'itemcompare',
                    offset: {
                        x: -10
                    },
                    listeners: {
                        'show': function(interaction) {
                            var val1 = interaction.item1.value,
                                val2 = interaction.item2.value;

                            chartPanel.descriptionPanel.setTitle('Trend from ' + val1[0] + ' to ' + val2[0] + ' : ' + Math.round((val2[1] - val1[1]) / val1[1] * 100) + '%');
                            chartPanel.headerPanel.setActiveItem(1, {
                                type: 'slide',
                                direction: 'left'
                            });
                        },
                        'hide': function() {
                            chartPanel.headerPanel.setActiveItem(0, {
                                type: 'slide',
                                direction: 'right'
                            });
                        }
                    }
                }],
                axes: [{
                    type: 'Numeric',
                    position: 'bottom',
                    fields: ['2008', '2009', '2010'],
                    label: {
                        renderer: function(v) {
                            return v.toFixed(0);
                        }
                    },
                    title: 'Number of Hits',
                    minimum: 0
                },
                {
                    type: 'Category',
                    position: 'left',
                    fields: ['name'],
                    title: 'Month of the Year'
                }],
                series: [{
                    type: 'bar',
                    xField: 'name',
                    yField: ['2008', '2009', '2010'],
                    axis: 'bottom',
                    highlight: true,
                    showInLegend: true
                }]
            }
        });

  var gamePanel =new Ext.Panel({
            fullscreen: true,
            items: [barPanel]
            });

Ext.setup({
    tabletStartupScreen: 'tablet_startup.jpg',
    phoneStartupScreen: 'phone_startup.jpg',
    tabletIcon: 'icon-ipad.png',
    phoneIcon: 'icon-iphone.png',
    glossOnIcon: false,
    onReady: function() {
        gamePanel.show();
    }
});

[jjohnston]

I see a couple of problems with your code snippet.

1) Both your gamePanel and barPanel have fullscreen:true, which will most likely mean one will overwrite the other.

2) The fullscreen:true config triggers immediate rendering. So your gamePanel is trying to be rendered before the onReady event has fired. You should move the instantiation into onReady.

Fixing these two items makes your chart display as expected on my iPad. I can't explain why it was working ok without these changes in Chrome/Safari, but I guess there's some quirk of mobile Safari that causes it.

[pankymishr]

Thanks. It Worked.

[stan229]

I'm having the same issue where it's working on an app that uses charts. My main viewport (bottom tabBar) has fullscreen = true and my Ext.chart.Panel also has fullscreen = true. When I remove the fullscreen = true in the chart panel it doesn't render. I tried the surface.renderFrame() but that didn't work.

[stan229]

Ill add a code sample:

My viewport:

app.views.Viewport = Ext.extend(Ext.TabPanel, {
    tabBar: {
        dock: 'bottom',
        ui: 'dark',
        layout: {
            pack: 'center'
        },
    },
    items: [{
        xtype: 'PatientList',
    }, {
        xtype: 'PhysReferralPanel'
    }, {
        xtype: 'SignatureCartList'
    }, {
        xtype: 'DashboardPanel'
    }, {
        iconCls: 'power_on',
        title: 'Log Off',
        listeners: {
            beforeactivate: {
                fn: function(){
                    var previousItem = Ext.getCmp('patientViewport').getActiveItem()
                    Ext.Msg.confirm("Log Off", "Are you sure you want to log off?", function(button){
                        if (button == "no") {
                            Ext.getCmp('patientViewport').setActiveItem(previousItem)
                        }
                        else {
                            app.currentUser = null;
                            location.reload();
                        }
                    })
                }
            }
        }
    }],
    
    fullscreen: true,
    id: 'patientViewport',
    cardSwitchAnimation: 'slide',
    initComponent: function(){
        app.views.Viewport.superclass.initComponent.apply(this, arguments);
    }
});

My Chart Panel:

var chart = new Ext.chart.Panel({
    items: {       
        insetPadding: 30,       
        shadow: true,
        animate: true,
        store: app.stores.dashboardStore,
        gradients: [{
            'id': 'v-1',
            'angle': 45,
            stops: {
                0: {
                    color: 'rgb(255, 1, 1)'
                },
                100: {
                    color: 'rgb(255,1,1)'
                }
            }
        }, {
            'id': 'v-2',
            'angle': 247,
            stops: {
                0: {
                    color: 'rgb(255, 183, 1)'
                },
                100: {
                    color: 'rgb(255,1,1)'
                }
            }
        }, {
            'id': 'v-3',
            'angle': 247,
            stops: {
                0: {
                    color: 'rgb(179,255,1)'
                },
                100: {
                    color: 'rgb(255, 183, 1)'
                }
            }
        }, {
            'id': 'v-4',
            'angle': 247,
            stops: {
                0: {
                    color: 'rgb(73,255,1)'
                },
                100: {
                    color: 'rgb(179, 255, 1)'
                }
            }
        }, {
            'id': 'v-5',
            'angle': 247,
            stops: {
                0: {
                    color: 'rgb(73,255,1)'
                },
                100: {
                    color: 'rgb(73, 255, 1)'
                }
            }
        }],
        axes: [{
            type: 'gauge',
            position: 'gauge',
            minimum: 0,
            maximum: 100,
            steps: 10,
            margin: 7
        }],
        series: [{
            type: 'gauge',
            field: 'value',
            donut: 0,
            
            colorSet: ['url(#v-1)', '#ddd'],
            renderer: function(sprite, record, rendererAttributes, i, store){
                if (i == 0) {
                    var fillColor
                    var value = record.get("value")
                    if (value >= 0 && value < 20) {
                        fillColor = "url(#v-1)"
                    }
                    else 
                        if (value >= 21 && value < 40) {
                            fillColor = "url(#v-2)"
                        }
                        else 
                            if (value >= 41 && value < 60) {
                                fillColor = "url(#v-3)"
                            }
                            else 
                                if (value >= 61 && value < 80) {
                                    fillColor = "url(#v-4)"
                                }
                                else {
                                    fillColor = "url(#v-5)"
                                }
                    sprite.attr.fill = fillColor;
                }
                else {
                    return rendererAttributes
                }
                
                
            }
        }]
    }
});
app.views.DashboardPanel = Ext.extend(Ext.Panel, {
    title: 'Dashboard',
    iconCls: 'speedometer2',
    id: 'dashboardPanel',
    dockedItems: [{
        xtype: 'toolbar',
        title: app.models.Dashboard.orderType + " " + app.models.Dashboard.getDateRangeString(),
        dock: 'top',
        defaults: {
            iconMask: true,
            ui: 'plain'
        },
        layout: {
            type: 'hbox',
        },
        items: [{
            xtype: 'spacer'
        }, {
            iconCls: 'compose',
            handler: function(){
                if (!this.popup) {
                    this.popup = new Ext.form.FormPanel({
                        floating: true,
                        modal: true,
                        centered: true,
                        width: 300,
                        height: 220,
                        items: [{
                            xtype: 'togglefield',
                            name: 'withinMonth',
                            label: 'Within 30 Days',
                            labelWidth: '60%',
                            labelAlign: 'right',
                            listeners: {
                                change: function(slider, thumb, newValue, oldValue){
                                    if (newValue == 1) {
                                        this.labelEl.dom.innerText = "After 30 Days"
                                        app.models.Dashboard.withinMonth = false
                                    }
                                    else {
                                        this.labelEl.dom.innerText = "Within 30 Days"
                                        app.models.Dashboard.withinMonth = true
                                    }
                                }
                            }
                        }, {
                            xtype: 'togglefield',
                            name: 'orderType',
                            label: 'Modifier',
                            labelWidth: '60%',
                            labelAlign: 'right',
                            listeners: {
                                change: function(slider, thumb, newValue, oldValue){
                                    if (newValue == 1) {
                                        this.labelEl.dom.innerText = "Full POC"
                                        app.models.Dashboard.orderType = "Full POC"
                                    }
                                    else {
                                        this.labelEl.dom.innerText = "Modifier"
                                        app.models.Dashboard.orderType = "Modifier"
                                    }
                                }
                            }
                        }, {
                            xtype: 'button',
                            text: 'Refresh',
                            handler: function(){
                                app.stores.dashboardStore.load();
                                this.ownerCt.hide();
                                chart.ownerCt.dockedItems.items[0].setTitle(app.models.Dashboard.orderType + " " + app.models.Dashboard.getDateRangeString());
                            }
                        }]
                    })
                }
                this.popup.show('pop');
            }
        }]
    }],
    
    items: [chart],
    listeners: {
        render: {
            fn: function(){
                chart.dockedItems.get(0).hide();
            }
        },
        activate: {
            fn: function(){
                app.stores.dashboardStore.load();
            }
        }
    },
    initComponent: function(){
        app.views.DashboardPanel.superclass.initComponent.apply(this, arguments);
    }
});


Ext.reg('DashboardPanel', app.views.DashboardPanel)

[philogb]

Could you provide a code snippet or a simple test case with the problem?

Thanks,