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體驗差不多!

手機瀏覽器下的展示:


發佈了57 篇原創文章 · 獲贊 13 · 訪問量 37萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章