0

When an application is created using Ext.application() (modern toolkit), pull-to-refresh functionality seems to be disabled on the mobile browsers. Is there any way to re-enable it?

Code:

Ext.application({
    name : 'Fiddle',

    launch : function() {
        //Ext.Msg.alert('Fiddle', 'Welcome to Sencha Fiddle!');
        Ext.Viewport.add({
            xtype: 'panel',
            title: 'Title',
            html: 'content'
        });
    }
});
MX Starter
  • 55
  • 6
  • can you share some code, probably a fiddle (fiddle.sencha.com)? Did you use the plugin 'pullrefresh'. in Cordova or simple browser. any specific device? We got it working. – Dinkheller Mar 29 '22 at 18:00
  • There is nothing special about it. It is a basic starter example. I edited te original question to include the code. The fiddle is at: https://fiddle.sencha.com/fiddle/3j4i (but it is not an appropriate test place). When i run the example code in a mobile browser (Chrome, Samsung Internet) under Android - the pull down to refresh is not working – MX Starter Mar 30 '22 at 07:15
  • Another example will be the the starter template app generated with Sencha Cmd (sencha generate app ..). It also prevents pull refresh for both classic and modern toolkit versions – MX Starter Mar 30 '22 at 07:31
  • can you post which Sencha CMD you are using? – Dinkheller Mar 30 '22 at 10:45
  • version is 7.5.1.20 – MX Starter Mar 30 '22 at 14:10
  • If I run your fiddle pull refresh works for me. Tested on Safari / Chrome with iOS 15.3.1 and Samsung Internet / Chrome with Samsung Galaxy A12 Android 11. – Peter Koltai Mar 30 '22 at 16:01
  • It is running on the fiddle, of course - that is why i told in my previous comment it is not the appropriate test case. The fiddle page is lot different than a 'clean' application, because it 'contains' the application within. Can you try the following - it is a simple starter app generated using sencha command - without any modifications: http://extjs-bg.com:88/test/? I thinks this is a styling-related behavior... – MX Starter Mar 31 '22 at 07:57
  • @MXStarter I see, it is not working. Try to setup the main view as viewport, for example defining like `Ext-define('MyMainView', {extend: 'Ext.container.Viewport', ....`. Also check if your `index.html` has something like: `` – Peter Koltai Mar 31 '22 at 15:14
  • Yes, my my meta setting is ''. Without it, the elements are very small on the screen so it must be present, i believe. Also, in the version generated by Sencha CMD it is: – MX Starter Mar 31 '22 at 16:06
  • So please try to extend the main view from `Ext.container.Viewport`, and see if it helps. – Peter Koltai Mar 31 '22 at 16:16
  • Not sure if i understood you. So just to be sure - in my example, i have 2 components - 1. An automatically created `Ext.Viewport` (singleton instantiated by `Ext.application()`), 2. A panel within the viewport. What you understand under "main view" - the viewport or the panel? Should i destroy the Ext.Viewport instance and replace it with `Ext.container.Viewport` instance? But even then - i'm confused, because there is no `Ext.container.Viewport` class in the modern toolkit. – MX Starter Apr 01 '22 at 07:58

1 Answers1

0

The problem described comes from the Ext.Viewport instance and more precisely - the modifications it makes to the styling of the body element. If i skip the 'normal' app launch process (for example - rendering the initial view directly on the body and return before Ext.application() call which creates the viewport) - it works as expected:

Ext.onReady(function () {
    Ext.create({
        xtype: 'panel',
        renderTo: Ext.getBody(),
        fullscreen: true,
        title: 'Panel',
        html: 'My panel text...'
    });
        return;
        Ext.application({...});
});
MX Starter
  • 55
  • 6