首先要配置開發環境。這個很簡單，只要到官方網站下載Sencha Touch壓縮包即可http://www.sencha.com/products/touch/。
開發工具隨便一個編輯器，記事本也可以的。
本人用的是MyEclipse+Tomcat，Sencha Touch用的是1.01版本(使用MyEclipse+Tomcat我為了以後例子可以跟後台交互)
其實可以直接浏覽本地靜態html文件的。
1，編寫messageBox.html文件：
Html代碼
- <!doctype html>
- <html>
- <head>
- <metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
- <title>messageBox.html</title>
- <linkrel="stylesheet"href="../../ext/resources/css/sencha-touch.css"type="text/css">
- <scripttype="text/javascript"src="../../ext/sencha-touch.js"></script>
- <scripttype="text/javascript"src="messageBox.js"></script>
- </head>
- <body>
- </body>
- </html>
如果你以前用過Extjs，那麼這段代碼你很容易明白。
- 引入sencha-touch.css樣式文件。
- 引入sencha-touch.js核心庫文件。
- messageBox.js是例子用的文件。
2，編寫messageBox.js文件：
Js代碼
- Ext.setup({
- icon: '../icon.png',
- tabletStartupScreen: '../tablet_startup.png',
- phoneStartupScreen: '../phone_startup.png',
- glossOnIcon: false,
- onReady: function() {
- Ext.Msg.alert('提示', '第一個SenchaTouch程序！');
- }
- });
現在我們只關心onReady函數裡面的代碼，其他可以copy。
如果你以前做過Extjs那麼看API難不到你。你可以在onReady中使用其他組件進行測試的。
3，運行效果：
本人使用的是Opera的手機模擬器(支持HTML5)，google浏覽器也可以的。
在浏覽器輸入http://localhost:8080/SenchaTouchTest/myExample/messageBox/messageBox.html
當然你可以直接打開html進行浏覽而不必要部署到服務器(我為了以後例子可以跟後台交互)
Sencha Touch 的詳細介紹：請點這裡
Sencha Touch 的下載地址：請點這裡
