Sencha Touch in WebView

I've just heard about Sencha touch and wanted to give it a try. So I just copied one of the examples and uploaded everything to my webspace.

The web app works with Google Chrome on my desktop pc and also with iPhone/android mobile browsers. But my thought was that I could build a very tiny app that contains nothing but a standard webview and let this web-view display the web app.

But all I get is a blank screen.

Is this not supposed to work or am I doing something wrong?

Here the sencha app (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>

回答1:

The code seems to be correct. Please check the .js and .css files. They should be added correctly in index.html

回答2:

What I changed is: Enable JavaScript for the Android Webview:

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

And added the following line to my app.js

viewport: { autoMaximize: false },

回答3:

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

For Sencha Touch 2

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

回答4:

Check the path of .js and .css files you are adding in index.html

also make sure you are using chrome or safari to see the output..