在Sencha touch中运行Hello World程序(基本)

时间:2012-04-28 08:02:35

标签: cordova sencha-touch extjs sencha-touch-2

我有2个问题,关于Sencha touchphone gap;

我正在阅读Ajith kumar的SenchaTouch CookBook。我正在按照第1章中给出的示例程序进行操作。所以根据我做了以下。

这是我的index.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Yapps! - Your daily applications!</title>
            <link rel="stylesheet" href="sencha-
                touch/resources/css/sencha-touch.css" type="text/css">
                <link rel="stylesheet" href="sencha-
                    touch/resources/css/yapps-all.css" type="text/css">
                <script type="text/javascript" charset="utf-8"
                    src="phonegap.1.0.0.js"></script>
                <script type="text/javascript" charset="utf-8" src="sencha-
                    touch/sencha-touch.js"></script>
                <script type="text/javascript" charset="utf-8"
                    src="ch01/ch01_03.js"></script>
                <script type="text/javascript" charset="utf-8" src="sencha-
                    touch/yapps-all.js"></script>



        </head>
        <body></body>
    </html>

ch01_03.js文件。告诉你在WWW文件夹中添加这些.JS文件,但是我无法在该文件夹中添加任何文件,因此我将其添加到文件夹中。

Ext.setup({
          onReady: function() {
          var supportedFeatures = "Ext.supports.AudioTag : " +
          (Ext.supports.AudioTag ? "On" : "Off");
          supportedFeatures += "\nExt.supports.CSS3BorderRadius : " +
          (Ext.supports.CSS3BorderRadius ? "On" : "Off");
          supportedFeatures += "\nExt.supports.CSS3DTransform : " +
          (Ext.supports.CSS3DTransform ? "On" : "Off");
          supportedFeatures += "\nExt.supports.CSS3LinearGradient : " +
          (Ext.supports.CSS3LinearGradient ? "On" : "Off");
          supportedFeatures += "\nExt.supports.Canvas : " +
          (Ext.supports.Canvas ? "On" : "Off");
          supportedFeatures += "\nExt.supports.DeviceMotion : " +
          (Ext.supports.DeviceMotion ? "On" : "Off");
          supportedFeatures += "\nExt.supports.Float : " +
          (Ext.supports.Float ? "On" : "Off");
          supportedFeatures += "\nExt.supports.GeoLocation : " +
          (Ext.supports.GeoLocation ? "On" : "Off");
          supportedFeatures += "\nExt.supports.History : " +
          (Ext.supports.History ? "On" : "Off");
          supportedFeatures += "\nExt.supports.OrientationChange : " +
          (Ext.supports.OrientationChange ? "On" : "Off");
          supportedFeatures += "\nExt.supports.RightMargin : " +
          (Ext.supports.RightMargin ? "On" : "Off");
          supportedFeatures += "\nExt.supports.SVG : " +
          (Ext.supports.SVG ? "On" : "Off");
          supportedFeatures += "\nExt.supports.Touch : " +
          (Ext.supports.Touch ? "On" : "Off");
          supportedFeatures += "\nExt.supports.Transitions : " +
          (Ext.supports.Transitions ? "On" : "Off");
          supportedFeatures += "\nExt.supports.TransparentColor : " +
          (Ext.supports.TransparentColor ? "On" : "Off");
          supportedFeatures += "\nExt.supports.VML : " +
          (Ext.supports.VML ? "On" : "Off");
          Ext.Msg.alert("INFO", supportedFeatures);
          }
          });

1。)问题是,当我在iPhone和Stimulator上运行时,我只看到一个空白屏幕。这是怎么回事,我该怎么做才能在视图上显示警报?

2。)我需要检测我正在运行应用程序的设备。在本书中,它展示了如何检测iPad,Android应用程序和Blackberry。但不是iPhone。我如何检测iPhone?

Ext.setup({
          onReady: function() {

          if (Ext.is.Android)
          Ext.Msg.alert("INFO", "Welcome Android user!");
          if (Ext.is.Blackberry)
          Ext.Msg.alert("INFO", "Welcome Blackberry user!");
          if (Ext.is.iPad)
          Ext.Msg.alert("INFO", "Welcome iPad user!");

          } });

1 个答案:

答案 0 :(得分:1)

由于此问题标记在sencha-touch-2下,我假设您使用的是Sencha Touch 2.

Sencha Touch 2.0版已弃用

Ext.is

相反,您可以使用Ext.env.OS程序包来检测正在设备上运行的操作系统。

此外,您可以使用is属性来检测iPad,iPhone,Android等设备。

  • Ext.os.is.Android:Android平台
  • Ext.os.is.iPhone:iPhone
  • Ext.os.is.iPad:iPad等..

编辑:

是的,您可以检测到p设备。检查以下代码......

var navigation = Ext.global.navigator,
    userAgent = navigation.userAgent,
    osEnv, osName, deviceType;

Ext.os = osEnv = new this(userAgent, navigation.platform);

osName = osEnv.name;

var search = window.location.search.match(/deviceType=(Tablet|Phone)/),
nativeDeviceType = window.deviceType;

if (search && search[1]) {
    deviceType = search[1];
}
else if (nativeDeviceType === 'iPhone') {
    deviceType = 'Phone';
}
else if (nativeDeviceType === 'iPad') {
    deviceType = 'Tablet';
}

Sencha Touch MVC with PhoneGap

上的好例子