Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Jul 2011
    Posts
    6
    Vote Rating
    0
    pankymishr is on a distinguished road

      0  

    Default Unanswered: Code not working on IPad Simulator whereas working fine on Safari/Crome

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


    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.

  2. #2
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Answers
    17
    Vote Rating
    20
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    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

  3. #3
    Sencha User
    Join Date
    Jul 2011
    Posts
    6
    Vote Rating
    0
    pankymishr is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Answers
    17
    Vote Rating
    20
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    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.

  5. #5
    Sencha User
    Join Date
    Jul 2011
    Posts
    6
    Vote Rating
    0
    pankymishr is on a distinguished road

      0  

    Default


    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.

    Code:
    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();
        }
    });

  6. #6
    Sencha - Architect Dev Team jjohnston's Avatar
    Join Date
    Sep 2010
    Posts
    556
    Answers
    28
    Vote Rating
    19
    jjohnston will become famous soon enough jjohnston will become famous soon enough

      0  

    Default


    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.

  7. #7
    Sencha User
    Join Date
    Jul 2011
    Posts
    6
    Vote Rating
    0
    pankymishr is on a distinguished road

      0  

    Default


    Thanks. It Worked.

  8. #8
    Ext GWT Premium Member
    Join Date
    Apr 2009
    Location
    NYC
    Posts
    112
    Answers
    2
    Vote Rating
    1
    stan229 is on a distinguished road

      0  

    Default


    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.

  9. #9
    Ext GWT Premium Member
    Join Date
    Apr 2009
    Location
    NYC
    Posts
    112
    Answers
    2
    Vote Rating
    1
    stan229 is on a distinguished road

      0  

    Default


    Ill add a code sample:

    My viewport:
    Code:
    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:

    Code:
    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)

  10. #10
    Sencha User
    Join Date
    Nov 2010
    Posts
    168
    Vote Rating
    0
    philogb is on a distinguished road

      0  

    Default


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

    Thanks,