sencha touch学习笔记一:web工程下的示例

网上不少教程说引用Sencha Touch的两个文件就可以用sencha编程了,可是我试了一下,结果不理想。

新建一个web工程,在新建的HTML文件中引用sencha touch解压包中的sencha-touch.jsresources文件夹中的css文件夹中的sencha-touch.css。再编写一个自己的js文件app.js(命名随便)。

HTML代码如下:


<!DOCTYPE html>
<html>
<head>
    <title>touch</title>

    <script type="text/javascript" src="touch/js/sencha-touch.js"></script>
    <link type="text/css" rel="stylesheet" href="touch/css/sencha-touch.css">

    <script type="text/javascript" src="public/js/app.js"></script>
</head>
<body>
</body>
</html>

app.js内容为:

Ext.setup({
    icon:'touch/icon/icon.png',
    tabletStartupScreen:'touch/icon/tablet_startup.png',
    phoneStartupScreen:'touch/icon/phone_startup.png',
    glossOnIcon:false,
    onReady: function(){
        alert("hello");
    }
});

Tomcat开启这个项目,访问这个网页,居然是空白的,什么都没有。

把引用文件sencha-touch.js改为sencha-touch-all.js

有提示框弹出了,可是没有样式,用手机访问也是这个问题,无解。网上这个教程应该是1.X版本的吧,反正没有相应的效果出来,不解决这个问题,就没有必要往下学习了。

 

上一个小节,我用命令:sencha  generate  app  APP名称 APP存放路径

生成了shecha touch 的入门小例子,为什么不用我们的web过程加载这些文件,看是否在自己的web过程里面也能开启相应的效果呢?!

所以用命令生成的目录如下:


把这个目录下的所有文件都拷贝到我们的项目中

 

再开启Tomcat,访问这个文件夹下的index.html文件,一样和用jetty开启的项目一样的效果:

 

 

受到这个启示,Sencha Touch解压包里面有示例,可是不像Extjs直接打开就能看到了,可见还是要放到web项目中才能访问的,所以我们把整个examples文件夹都复制进项目中,重启Tomcat,访问:

http://localhost:8080/examples/index.html

 

有各种例子了,可是点击进去却是空白,到examples文件夹中看一下,发现都没有sencha-touch.jssencha-touch.css。可见,还需要引入这些文件,所以把解压的Sencha目录下的四个js文件还有resources文件夹也引入!

 

重启Tomcat,再次访问:随便点击一个条目例子,都能进入了,并且想看源码也很方便,这样比到官网上看,忍受它那龟速的访问好太多了!

 

如上图,虽然可见效果了,可是有些样式还是没能展现出来,用手机访问的话,不会出现这样问题,效果还是很好看的,正如官网吹的那样,和原生Android体验差不多!

手机浏览器下的展示:


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值