網上不少教程說引用Sencha Touch的兩個文件就可以用sencha編程了,可是我試了一下,結果不理想。
新建一個web工程,在新建的HTML文件中引用sencha touch解壓包中的sencha-touch.js和resources文件夾中的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.js和sencha-touch.css。可見,還需要引入這些文件,所以把解壓的Sencha目錄下的四個js文件還有resources文件夾也引入!
重啓Tomcat,再次訪問:隨便點擊一個條目例子,都能進入了,並且想看源碼也很方便,這樣比到官網上看,忍受它那龜速的訪問好太多了!
如上圖,雖然可見效果了,可是有些樣式還是沒能展現出來,用手機訪問的話,不會出現這樣問題,效果還是很好看的,正如官網吹的那樣,和原生Android體驗差不多!
手機瀏覽器下的展示: