安卓WebView中的Sencha 2白屏幕

Question

我正致力于将JavaScript应用程序从Sencha Touch 1.x迁移到Sencha Touch 2.x。它被指定在本地安卓应用程序的WebView中运行。该应用程序在Sencha Touch 1.x上工作。同时，为了使其在Sencha Touch 2.x上运行，已经进行了大量的重构和调试。当前使用的Sencha Touch版本为2.4.2。

我在桌面版的Firefox上做了一些测试。这基本上是可行的，但测试是有限的，因为Sencha Touch应用程序高度依赖于本地Android应用通过JS接口提供的几个对象和方法。

现在，当涉及到在Android WebView中运行它时，我面临一个奇怪的问题:在启动和呈现之后，我所看到的只是一个白色的屏幕，而所有的MVC依赖项都被加载，并且launch()在Ext.application中被正确触发。控制台中根本没有JavaScript错误，所有Ext类/对象/方法都是可用的。

这是我的Ext.application块的基本设置：

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);
    }
});

视图(例如MyApp.view.Startseite视图)被定义为非常传统的视图：

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

有趣的是: Sencha确实会根据我通过Ext.Viewport.add()加载的视图生成大量的HTML内容，这可以从我正在记录的innerHTML.length中推断出来。但是在WebView中什么也没有出现。如果我创建一个不同的视图并通过Ext.Viewport.add()加载它，那么大小就会发生变化，但是视图仍然是白色的。

这是什么原因？我也非常感谢关于调试这个问题或以某种方式隔离这个问题的任何技巧。

Answer 1

一个可能的原因可能是WebView的布局本身。请检查WebView的布局高度。将其设置为MATCH_PARENT应该可以完成这项工作。

建议将WebView布局高度设置为固定值或MATCH_PARENT，而不是使用WRAP_CONTENT。

请参见此处的布局大小部分：http://developer.android.com/reference/android/webkit/WebView.html