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>

标签： Extjs sencha-touch

4条回答

戒情不戒烟

2楼-- · 2020-08-01 08:59

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..

0人赞添加讨论(0) 举报

狗以群分

3楼-- · 2020-08-01 09:00

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

0人赞添加讨论(0) 举报

ら.Afraid

4楼-- · 2020-08-01 09:09

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

0人赞添加讨论(0) 举报

Sencha Touch in WebView

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间