Sencha Touch 2 White screen in Android WebView

Question

I am working on the migration of a JavaScript app from Sencha Touch 1.x to Sencha Touch 2.x. It is designated to run in a WebView inside a native Android app. The app worked on Sencha Touch 1.x. Meanwhile there has been a lot of refactoring and debugging to make it run on Sencha Touch 2.x. The current Sencha Touch version being used is 2.4.2.

I did some testing in a desktop version of Firefox. It basically worked out, but testing is limited since the Sencha Touch app is highly dependent on several objects and methods provided by the native Android app via JS-interface.

Now, when it comes to running it inside the Android WebView I am facing a strange issue: After startup and rendering all I get to see is nothing but a white screen, whereas all MVC-dependencies are loaded and the launch() in Ext.application is being triggered properly. There are no JavaScript errors in the console at all and all Ext classes/objects/methods are available.

This is the basic setup of my Ext.application block:

Ext.application({
    name: 'MyApp',
    models: [
        'TestModel',
        'UserModel',
        'HauptmenueModel',
        /* ... */
    ],
    controllers: [
        'MyController'
    ],
    views: [
        'Benutzer',
        'Startseite',
        /* ... */
    ],
    stores: [
        'TestStore',
        'UserStore',
        'HauptmenueStore',
        /* ... */
    ],
    launch: function () {
        Ext.Viewport.add(Ext.create('MyApp.view.Startseite'));

        console.log(document.body.innerHTML.length);
    }
});

The views (e. g. the MyApp.view.Startseite view) are defined quite conventional:

Ext.define('MyApp.view.Startseite', {
    extend: 'Ext.Panel',
    config: {
        id: 'Startseite',
        layout: 'card',
        items: [
            /* ... */
        ]
    },
    /* ... */
});

What is interesting: Sencha Touch does indeed generate a lot of HTML content depending on the view I am loading via Ext.Viewport.add(), which I can deduce from the innerHTML.length I am logging. But nothing shows up in the WebView. The size consequently changes if I create a different view and load it via Ext.Viewport.add() but the viewport remains white.

What could be the reason for this? I am also very thankful for any tips on debugging this or somehow isolating this issue.

score 1 · Accepted Answer · answered Jan 13 '16 at 11:49

1

A possible reason for this could be the WebView’s layout itself. Please check the layout height of the WebView. Setting it to MATCH_PARENT should do the job.

It is recommended to set the WebView layout height to a fixed value or to MATCH_PARENT instead of using WRAP_CONTENT.

See the Layout size section here: http://developer.android.com/reference/android/webkit/WebView.html

answered Jan 13 '16 at 11:49

Marcel Hencke

76
1
4

Thanks a lot, it works like a charm! (I've set the `android:layout_height` parameter in the `` markup to `match_parent`.) – proximus Jan 13 '16 at 11:52

Sencha Touch 2 White screen in Android WebView

1 Answers1