Sencha Touch 介紹

1. Sencha Touch
author:Canred

2. Web Mobile Tech.
1.jQuery Mobile
Last Version : 1.4.5
官網：http://demos.jquerymobile.com/1.4.5/button-markup/
2.Sencha Touch
Last Version : 2.4
官網：http://www.sencha.com/products/touch/
3.Bootstrap
Last Verision:3.3.2
Depend by : JQuery 1.9 以上
官網：http://getbootstrap.com/
4.Other
ps:http://www.slideshare.net/stevedrucker/mobile-platforms-19979061?next_slideshow=1

3. Sench Touch’s優劣
1.可同時支持不同的Device顯示方式(Phone,Tablet,Windowsphone)

4. Sench Touch’s優劣
2.強調 One Page One Application 的開發方式，讓您的Web Mobile App的
操作方式更貼近於原生的App。
3.元件豐富
4.API文檔完整 http://docs-origin.sencha.com/touch/2.4/2.4.1-apidocs/
5.較少的CSS來控制UI Layout.
6.可轉成Android的原生碼的可能性，可再製開發
http://www.slideshare.net/edspencer/introduction-to-sencha-touch?related=2

6. Sench Touch’s優劣
1.Touch基底的程式碼較
大約2Mb,第一次載入
的時侯較花時間。

7. Sench Touch’s優劣
2.程序開發架框不易撐握。

8. Sench Touch’s優劣
3.不懂 Javascript , js 除錯的人學習趨線將
拉的很長

9. JS
容
易
學
嗎
?

11. Javascript
是一種易學，但難精通的語言!

12. It’s showtime..

13. Builder First Touch App
1.Download Sencha Touch Source code .
2.安裝Sencha command 來建立 Touch 的基本框架
參考資料：http://blog.toright.com/posts/3241/web-app-
%E8%A1%8C%E5%8B%95%E9%96%8B%E7%99%BC-3-sencha-touch-
%E9%96%8B%E7%99%BC%E7%92%B0%E5%A2%83%E5%BB%BA%E7%BD%AE.html
3.執行指令
sencha generate app YourApp YourAppPath

14. Sencha MVC
Store
Model
Direct
http://www.slideshare.net/mkamithkumar/mvc-in-sencha-touch?related=1

15. Sencha Controller’s refs
因為View & Controller 是完全的分離的情況下…當我們在Controller時，如何正
確的取得View上的元件，以及設定View元件上的行為動作(event)。
Controller’s refs
refs:{
txtUserName:”textfield[action=userName]”,
txtPasswordName:”passwordfield[action=userPwd]”
},
control:{
txtUserName:{
change:’onTxtUserName’ //onTxtUserName is a function
}
}

16. Sencha Controller’s refs
function onTxtUserName(obj,newValue,oldValue){
// how to get passworld value ???
}
this.getTxtPasswordName().value();

17. 追縱程式碼
真
相
只
有
一
個
!!
程
序
入
口
僅
有
一
個

18. Q&A