WebView 中的 Sencha Touch答案

【问题标题】：Sencha Touch in WebViewWebView 中的 Sencha Touch
【发布时间】：2012-01-05 12:01:17
【问题描述】：

我刚刚听说Sencha touch 并想试一试。所以我只是复制了其中一个示例并将所有内容上传到我的网络空间。

该网络应用程序可与我台式电脑上的 Google Chrome 以及 iPhone/android 移动浏览器一起使用。但我的想法是我可以构建一个非常小的应用程序，它只包含一个标准的webview，并让这个 web 视图显示 web 应用程序。

但我得到的只是一个空白屏幕。

这不应该工作还是我做错了什么？

这里是煎茶应用程序（app.js）：

Ext.application({
    name: 'Sencha',

    launch: function() {
        Ext.create("Ext.TabPanel", {
            fullscreen: true,
            tabBarPosition: 'bottom',

            items: [{
                title: 'Home',
                iconCls: 'home',
                cls: 'home',
                html: [
                    '<img width="65%" src="http://staging.sencha.com/img/sencha.png" />',
                    '<h1>Welcome to Sencha Touch</h1>',
                    "<p>You're creating the Getting Started app. This demonstrates how ",
                    "to use tabs, lists and forms to create a simple app</p>",
                    '<h2>Sencha Touch (2.0.0pr1)</h2>'
                ].join("")
            }, {
                xtype: 'list',
                title: 'Blog',
                iconCls: 'star',

                itemTpl: '{title}',
                store: {
                    fields: ['title', 'url'],
                    data: [{
                        title: 'Ext Scheduler 2.0',
                        url: 'ext-scheduler-2-0-upgrading-to-ext-js-4'
                    }, {
                        title: 'Previewing Sencha Touch 2',
                        url: 'sencha-touch-2-what-to-expect'
                    }, {
                        title: 'Sencha Con 2011',
                        url: 'senchacon-2011-now-packed-with-more-goodness'
                    }, {
                        title: 'Documentation in Ext JS 4',
                        url: 'new-ext-js-4-documentation-center'
                    }]
                }
            }]
        }).setActiveItem(1);
    }
});

index.html:

<!DOCTYPE html>
<html>

<head>
    <title>Getting Started</title>
    <link rel="stylesheet" href="touch/resources/css/sencha-touch.css" type="text/css">
    <script type="text/javascript" src="touch/sencha-touch-all.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>

<body></body>

</html>

【问题讨论】：

你的平台是什么？你在浏览器上开发吗？有日志吗？我认为您应该提供更多信息。尝试转义会在运行时破坏 javascript 的引号。
我不知道你的意思是“你在浏览器上开发吗？”但我用 android webview 和 iPhone webview 测试了 webapp。转义任何引号对我来说没有多大意义，因为我从我提到的官方示例之一复制了 app.js。

标签： extjs sencha-touch

【解决方案1】：

代码似乎是正确的。请检查.js 和.css 文件。它们应该在index.html中正确添加

【讨论】：

【解决方案2】：

我更改的是：为 Android Webview 启用 JavaScript：

WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);

并将以下行添加到我的 app.js 中

viewport: { autoMaximize: false },

【讨论】：

【解决方案3】：

Ext.application({
  name: 'Orchdid Mobile',
  viewport: {
    autoMaximize: true
  },
  launch: function () {.......}
});

煎茶触控 2

http://dev.sencha.com/deploy/sencha-touch-2-b3/release-notes.html

【讨论】：

【解决方案4】：

检查您在index.html 中添加的.js 和.css 文件的路径

还要确保您使用 chrome 或 safari 来查看输出..

【讨论】：