论坛风格切换切换到宽版
  • 11634阅读
  • 0回复

sencha 入门 ExtJS + JQTouch + Raphaël 整合的Sencha Touch框架 [复制链接]

上一主题 下一主题
 

发帖
1077
只看楼主 倒序阅读 使用道具 楼主  发表于: 2011-02-16
— 本帖被 jinwyp 从 互联网技术与编程讨论区 移动到本区(2013-01-24) —
著名的JavaScript框架ExtJS宣布,将现有ExtJS整合JQTouchRaphaël库,推出适用于最前沿Touch  Web的Sencha Touch框架,该框架是世界上第一个基于HTML5的Mobile  App框架。同时,ExtJS也正式更名为Sencha。原域名www.extjs.com也已经跳转至www.sencha.com


http://www.oschina.net/news/10300/sencha-touch

环境配置

    
首先要配置开发环境。
这个很简单,只要到官方网站下载sencha-touch压缩包即可 http://www.sencha.com/products/touch/
开发工具随便一个编辑器,记事本也可以的。

本人用的是myEclipse+tomcat,sencha-touch用的是1.01版本
(使用myEclipse+tomcat我为了以后例子可以跟后台交互)
其实可以直接浏览本地静态html文件的。




1,编写messageBox.html文件:


Html代码

  1. <!doctype html>
  2. <html>
  3.   <head>
  4.       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    
  5.     <title>messageBox.html</title>
  6.     <link rel="stylesheet" href="../../ext/resources/css/sencha-touch.css" type="text/css">
  7.     <script type="text/javascript" src="../../ext/sencha-touch.js"></script>
  8.     <script type="text/javascript" src="messageBox.js"></script>
  9.   </head>
  10.   
  11.   <body>
  12.     
  13.   </body>
  14. </html>



如果你以前用过Extjs,那么这段代码你很容易明白。
1,引入sencha-touch.css样式文件。
2,引入sencha-touch.js核心库文件。
3,messageBox.js是例子用的文件。

2,编写messageBox.js文件:

Js代码
  1. Ext.setup({
  2.     icon: '../icon.png',
  3.     tabletStartupScreen: '../tablet_startup.png',
  4.     phoneStartupScreen: '../phone_startup.png',
  5.     glossOnIcon: false,
  6.     onReady: function() {
  7.         Ext.Msg.alert('提示', '第一个SenchaTouch程序!');
  8.     }
  9. });



现在我们只关心onReady函数里面的代码,其他可以copy。
如果你以前做过Extjs那么看API难不到你。你可以在onReady中使用其他组件进行测试的。

3,运行效果:
本人使用的是Opera的手机模拟器(支持HTML5),google浏览器也可以的。
在浏览器输入http://localhost:8080/SenchaTouchTest/myExample/messageBox/messageBox.html
当然你可以直接打开html进行浏览而不必要部署到服务器(我为了以后例子可以跟后台交互)



  


快速回复
限100 字节
批量上传需要先选择文件,再选择上传
 
上一个 下一个