Cannot Scroll on an iPhone using Ext JS app

[gzambrano]

Sencha Architect Version 4.2.4.389, Framework Ext JS 6.5.3 Modern, iOS 14.6

I am unable to scroll on the iPhone. I can scroll fine on the desktop using Chrome browser.

I have activated scrolling for all components in the screens but only the toolbars and the grids allow scrolling on the iPhone.

I tried to use html on the main panel and had a bit of success but do not really know how to do it.

Can you tell me what I need to do in the app to be able to scroll on the iPhone?

Please let me know if you need any further information.

[Johnny Major]

Here is a Sencha Fiddle that displays a scrolling panel. A good place for ExtJs specific questions/answers is stack overflow

Example Source

Ext.application({
    name: 'Fiddle',

    launch: function () {
        var baseStyle = {
            "font-weight": 600,
            "font-size": "16px"
        };

        var panel = Ext.create('Ext.Panel', {
            fullscreen: true,
            title: 'Scrollable Panel',
            scrollable: true,
            height : window.innerHeight,
            items: [{
                xtype: 'component',
                html: 'ITEM ONE',
                padding: 18,
                style: Ext.apply({
                    background: '#F44336'
                }, baseStyle),
                height: window.innerHeight / 2
            }, {
                xtype: 'component',
                html: 'ITEM TWO',
                padding: 18,
                style: Ext.apply({
                    background: '#FFEB3B'
                }, baseStyle),
                height: window.innerHeight + 100
            }, {
                xtype: 'component',
                html: 'ITEM THREE',
                padding: 18,
                style: Ext.apply({
                    background: '#4CAF50'
                }, baseStyle),
                height: window.innerHeight / 1.2
            }]
        });

        panel.show();
    }
});

[gzambrano]

Johnny Major

Thanks for the fiddle and the link to stack overflow.

I was able to scroll on one of the screens on the iPhone successfully, but only when I set it to fullscreen true.

I didn't really want it to be full screen in the desktop version but this was the only way that the scroll worked on the iPhone. I tried to add some code to condition by device type but it didn't work for the iPhone.

I had no luck trying to scroll on the other screen, as it works fine in the desktop version but it does not work on the iPhone and the Sencha Architect doesn't allow me to set fullscreen true for this panel.

Is there any chance that you can have a look at my app?

I will send you the details to support@cnxcorp.com