Sencha Touch（Extjs）
Sencha官方學習文檔：http://docs.sencha.com/touch/2.3.1/
Sencha2.3正式版下載：http://www.sencha.com/products/touch/download/sencha-touch-2.3.0/2920
Sencha中文學習站：http://www.extjs.org.cn/
Sencha示例：http://dev.sencha.com/deploy/touch/examples/production/kitchensink/#demo/buttons
Sencha權威指南（現在唯一能找到的PDF）：http://58.216.22.46/cdn.baidupcs.com/file/5dd6a5970143c278022846de120a5e52?fid=487907638-250528-3497330949&time=1385084343&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-HloyVBR13U%2BUs6SIbLkribGKADk%3D&rt=sh&expires=1385085113&r=895194695&sh=1&sharesign=+YD3O+zJmF58uOiHulZscbiVxDzJJxH4a9++RThyy8icCT7szX5qWhzxxswmQru+NcAdB9PoP7r8krpCvs71gSP8njdB7dpgd2i7Hd1SBvaEmfqmZOMSFwzW1aRbbySpoe1YLseNKUQIrKTDP0mPJd4k8yMHtQu1cPL0R5Mr5x/oqxo6vb6goK1PDrMYX6b9niSFvc0jJb2P33vWkpqj9AAuQPFb4kkLVD5zYySsMOyKSzk7a1yDI16g5CmIpmg+UEe0bhO6n4WOINlolGmGTKa3DJ4fze6SSuq8iSxudjQ=&cflg=7&xcode=9100e9d40540b89c95b65dfd9e2527bb&redirect=1&wshc_tag=0&wsiphost=ipdbm
?
預：對Sencha的介紹網上不少，可以先了解，這里直接進入學習案例。
----------------------------------------------------------------------------------------------------------------------------------------------------
準備
將下載后的Sencha2.3壓縮包，解壓到任意盤。打開解壓后的文件夾，先初步了解目錄結構。
builds：不能編譯應用程序時（如不能下載Sencha Touch的SDK工具）時，能讓應用程序正常運行所使用的框架核心文件。
cmd：包含創建或發布MVC模式的應用程序時必須使用的一些文件。
docs：Sencha Touch API文檔。
examples：實例。
microloader：包含創建或發布MVC模式的應用程序時必須使用的一些文件，可與cmd文件夾中的文件結合使用。
resources：資源文件夾，如css文件，images文件。
src：Sencha Touch源碼。
?
----------------------------------------------------------------------------------------------------------------------------------------------------
示例
在任意位置新建一個目錄（如：E:/stormSanCha），在目錄中新建css文件夾，images文件夾。
將剛才解壓出來的touch2.3.0文件夾中的：src，sencha-touch-all.js復制到該目錄下，resources文件夾下的css文件夾下的sencha-touch.css復制到該目錄下的css文件夾中。
到這里示例的基本條件已經滿足。
?
第一個示例頁面：
在新建的項目目錄中，創建panel.html和panelTest.js
panel.html中
?
<!DOCTYPE HTML> <html manifest="" lang="en-US"> <head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>一個簡單面板</title><link rel="stylesheet" type="text/css" href="E:/touch-2.3.0/stormSanCha/css/sencha-touch.css"></link><script type="text/javascript" src="E:/touch-2.3.0/stormSanCha/sencha-touch-debug.js"></script><script type="text/javascript" src="E:/touch-2.3.0/stormSanCha/sencha-touch-all.js"></script><script type="text/javascript" src="panelTest.js"></script><style>.colorRed{color:red;}</style> </head> <body></body> </html>
panelTest.js中
?
?
?
?
Ext.application({name:"MyApp",icon:"images/icon.png",//應用程序被添加到IOS操作系統中，主屏幕顯示的圖標。glossOnIcon:false,//是否要取消IOS操作系統中主屏幕添加的gloss效果。false：取消。phoneStartupScreen:"images/phone_startup.png",//IOS操作系統中，移動電話主屏幕顯示的圖標。tabletStartupScreen:"images/tablet_statrup.png",//IOS操作系統中，平板電腦主屏幕顯示的圖標。launch:function(){//創建面板方式一var panel = Ext.create("Ext.Panel",{fullscreen:true,id:"myPanel",html:"一個簡單的面板"});Ext.get("myPanel").addCls("colorRed");//為組件添加樣式//創建面板方式二var subPanel = new Ext.Panel({id:"subPanel",html:"面板中的子面板"});Ext.Viewport.add(panel);Ext.ComponentManager.get('myPanel').add(subPanel);} });?
?
效果如下：
?
?
Tab面板組件
在Sencha中使用Ext.tab.Panel來創建Tab面板，該類繼承Ext.Container類，類的別名為Ext.TabPanel。可以通過Ext.TabPanel類的items配置選項來定義Tab面板中所包含的多個子組件。
在新建的項目目錄中，創建tab.html和tabTest.js
tab.html中
?
<!DOCTYPE HTML> <html manifest="" lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>面板組件使用</title><link rel="stylesheet" type="text/css"href="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/css/sencha-touch.css"></link><script type="text/javascript"src="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/js/sencha-touch-all.js"></script><script type="text/javascript"src="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/tab/tabTest.js"></script><style> body {font-family: "宋體"; }.bgcolorPink {background-color: pingk; } </style></head><body></body> </html>
tabTest.js中
?
?
Ext.application({name:"MyApp",icon:"images/icon.png",//應用程序被添加到IOS操作系統中，主屏幕顯示的圖標。glossOnIcon:false,//是否要取消IOS操作系統中主屏幕添加的gloss效果。false：取消。phoneStartupScreen:"images/phone_startup.png",//IOS操作系統中，移動電話主屏幕顯示的圖標。tabletStartupScreen:"images/tablet_statrup.png",//IOS操作系統中，平板電腦主屏幕顯示的圖標。launch:function(){var tabPanel = Ext.create("Ext.TabPanel",{id:"tabPanel",ui:"dark",tabBarPosition:"bottom",items:[{title:"主頁",html:"主頁",iconCls:"home"},{title:"合同",html:"合同",iconCls:"user"}]});Ext.Viewport.add(tabPanel);} });
效果
?
?
Sencha Touch中內置圖片樣式效果：
?
| 圖標名稱 | 樣式名稱 | 顯示效果 |
| 添加圖標 | add | |
| 附件 | attachment | |
| 書簽 | bookmarks | |
| 編輯 | compose | |
| 刪除 | delete | |
| 首頁 | home | |
| 定位 | locate | |
| 地圖 | maps | |
| 排序 | organize | |
| 刷新 | refresh | |
| 回應 | reply | |
| 搜索 | search | |
| 回收站 | trash | |
| action | action | |
| 向上箭頭 | arrow_up | |
| 向下箭頭 | arrow_down | |
| 向左箭頭 | arrow_left | |
| 向右箭頭 | arrow_right | |
| 星圖標 | star | |
| 下載 | download | |
| 收藏夾 | favorites | |
| 信息 | info | |
| 省略 | more | |
| 設置 | settings | |
| 組隊 | team | |
| 時間 | time | |
| 用戶 | user |
?
?
?
Tab面板組件
?
?
?
使用Ext.layout.AbstractBoxLayout類來實現盒布局，但不是直接使用，必須繼承BoxLayout的兩個子類。
HBoxLayout類水平布局，VBoxLayout垂直布局。
?
1，水平盒布局使用
在新建的項目目錄中，創建box.html和boxTest.js
box.html中
?
<!DOCTYPE html> <html><head><title>box.html</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>盒子</title><link rel="stylesheet" type="text/css"href="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/css/sencha-touch.css"></link><script type="text/javascript"src="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/js/sencha-touch-all.js"></script><script type="text/javascript"src="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/box/boxTest.js"></script></head><body></body> </html>
boxTest.js中
?
?
Ext.application({name:"MyApp",icon:"images/icon.png",//應用程序被添加到IOS操作系統中，主屏幕顯示的圖標。glossOnIcon:false,//是否要取消IOS操作系統中主屏幕添加的gloss效果。false：取消。phoneStartupScreen:"images/phone_startup.png",//IOS操作系統中，移動電話主屏幕顯示的圖標。tabletStartupScreen:"images/tablet_statrup.png",//IOS操作系統中，平板電腦主屏幕顯示的圖標。launch:function(){var panel = Ext.create("Ext.Panel",{id:"myPanel",layout:{type:"hbox",align:"stretch"},items:[{flex:1,html:"子組件1",style:"background-color:#5E99CC;"},{flex:2,html:"子組件2",style:"background-color:#759E60;"}]}); Ext.Viewport.add(panel);} });?
?
效果：
?
代碼中使用items配置選項定了兩個子組件，使用layout定義面板使用的布局方式。
type：指定容器組件的布局方式，本文使用hbox水平布局。
align：指定容器中子組件的垂直對齊方式。默認為center，表示子組件的縱向對齊方式?？梢允褂胮ack來配置橫向對齊方式。
?
| 配置選項 | 選項值 | 對齊方式 |
| align | center | 中央對齊 |
| align | start | 頂部對齊 |
| align | end | 底部對齊 |
| align | stretch | 子組件的高度自 動擴展為容器高度 |
| pack | center | 中央對齊 |
| pack | start | 向左對齊 |
| pack | end | 向右對齊 |
| pack | justify | 兩端對齊 |
?
代碼中每一個子組件都使用了一個flex配置選項（所有繼承了容器的組件都具有該配置選項）。當使用水平盒布局時，該配置用來指定每一個子組件的高度。使用整數來指定該配置的選項值，該整數表示每一子組件占寬度占容器總寬度的百分比。本文中，容器面板的寬度為瀏覽器寬度，第一個子組件flex配置值為1，第二個子組件flex配置值為2，所得寬度：
?
第一個子組件：
（flex配置選項值1/flex配置選項值的綜合3）*瀏覽器寬度 = 瀏覽器寬度的1/3
第二個子組件
（flex配置選項值2/flex配置選項值的綜合3）*瀏覽器寬度 = 瀏覽器寬度的2/3
?
在配置選項可以同事使用width和flex來配置寬度
修改items內代碼：
?
items:[{flex:1,html:"子組件1",style:"background-color:#5E99CC;"},{flex:2,html:"子組件2",style:"background-color:#759E60;"},{width:200,html:"子組件3",style:"background-color:#5E99CC;"}]
第一個子組件的寬度：
?
（flex配置選項值1/flex配置選項值的總和3）*（瀏覽器總寬度-200）= （瀏覽器總寬度-200）*1/3
第二個子組件的寬度：
（flex配置選項值2/flex配置選項值的總和3）*（瀏覽器總寬度-200）= （瀏覽器總寬度-200）*2/3
第三個子組件的寬度：200
?
2.垂直盒布局使用
修改布局方式type為vbox，其余配置當是水平布局時設置寬度，當是垂直布局時設置高度。
?
Ext.application({name:"MyApp",icon:"images/icon.png",//應用程序被添加到IOS操作系統中，主屏幕顯示的圖標。glossOnIcon:false,//是否要取消IOS操作系統中主屏幕添加的gloss效果。false：取消。phoneStartupScreen:"images/phone_startup.png",//IOS操作系統中，移動電話主屏幕顯示的圖標。tabletStartupScreen:"images/tablet_statrup.png",//IOS操作系統中，平板電腦主屏幕顯示的圖標。launch:function(){var panel = Ext.create("Ext.Panel",{id:"myPanel",layout:{type:"vbox",align:"stretch"},items:[{flex:1,html:"子組件1",style:"background-color:#5E99CC;"},{flex:2,html:"子組件2",style:"background-color:#759E60;"},{width:200,html:"子組件3",style:"background-color:#5E99CC;"}]}); Ext.Viewport.add(panel);} });
效果：
?
?
?
?
Fig布局
這里介紹2個非常重要的布局：Fit布局與Card布局，其中Fit布局通過Ext.layout.FitLayout類來實現。
當容器組件中只有一個子組件時，通過Fit布局來將子組件的尺寸自動擴展至父容器組件的尺寸，使其充滿整個父容器組件內部。
?
在新建的項目目錄中，創建fit.html和fitTest.js
?
首先看一個沒有使用fit布局的示例
fit.html中
?
<!DOCTYPE html> <html><head><title>box.html</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>Fit布局</title><link rel="stylesheet" type="text/css"href="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/css/sencha-touch.css"></link><script type="text/javascript"src="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/js/sencha-touch-all.js"></script><script type="text/javascript"src="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/fit/fitTest.js"></script></head><body></body> </html>
fitTest.js中
?
?
<!DOCTYPE html> <html><head><title>box.html</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>Fit布局</title><link rel="stylesheet" type="text/css"href="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/css/sencha-touch.css"></link><script type="text/javascript"src="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/js/sencha-touch-all.js"></script><script type="text/javascript"src="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/fit/fitTest.js"></script></head><body></body> </html>
效果：
?
?
為了讓子組件的尺寸自動擴展為父容器面板的尺寸，修改js代碼如下：
?
<!DOCTYPE html> <html><head><title>box.html</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>Fit布局</title><link rel="stylesheet" type="text/css"href="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/css/sencha-touch.css"></link><script type="text/javascript"src="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/js/sencha-touch-all.js"></script><script type="text/javascript"src="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/fit/fitTest.js"></script></head><body></body> </html>
效果：
?
?
可以看出子組件的尺寸自動擴展為父容器的尺寸。
在使用Fit布局的時候，父容器中應該只存在一個子組件，如果存在多個子組件，將只會顯示一個。
?
例如：
?
Ext.application({name:"MyApp",icon:"images/icon.png",//應用程序被添加到IOS操作系統中，主屏幕顯示的圖標。glossOnIcon:false,//是否要取消IOS操作系統中主屏幕添加的gloss效果。false：取消。phoneStartupScreen:"images/phone_startup.png",//IOS操作系統中，移動電話主屏幕顯示的圖標。tabletStartupScreen:"images/tablet_statrup.png",//IOS操作系統中，平板電腦主屏幕顯示的圖標。launch:function(){var panel = Ext.create("Ext.Panel",{layout:"fit",items:[{style:"background-color:pink",html:"示例文字1"},{style:"background-color:pink",html:"示例文字2"}]});Ext.Viewport.add(panel);} });
效果：
?
可以看到雖然父容器中有2個子組件，但使用Fit布局時，只會顯示一個子組件。
?
Card布局
Card布局通過Ext.layout.FitLayout類的子類Ext.layout.CardLayout類來實現。Card容器用來對容器組件的多個子組件進行管理。
Card布局使用如下：
layout："card"
與Card配合使用的一個最重要的方法是setActiveItem方法，應為瀏覽器始終只顯示一個子組件，所以必須通過該方法來告訴瀏覽器顯示哪一個組件，從而實現不同子組件之間的切換。setActiveItem使用如下：
panel.setActiveItem(newCard)；
panel表示父容器組件對象，newCard可以是一個代表子組件的唯一id，也可以是組件集合中的序號（第一個子組件為0），甚至可以是一個代表子組件的變量。
?
在新建的項目目錄中，創建card.html和cardTest.js
?
card.html中
?
<!DOCTYPE html> <html><head><title>box.html</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>card布局</title><link rel="stylesheet" type="text/css"href="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/css/sencha-touch.css"></link><script type="text/javascript"src="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/js/sencha-touch-all.js"></script><script type="text/javascript"src="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/card/cardTest.js"></script></head><body></body> </html>
cardTest.js中
?
?
Ext.application({name:"MyApp",icon:"images/icon.png",//應用程序被添加到IOS操作系統中，主屏幕顯示的圖標。glossOnIcon:false,//是否要取消IOS操作系統中主屏幕添加的gloss效果。false：取消。phoneStartupScreen:"images/phone_startup.png",//IOS操作系統中，移動電話主屏幕顯示的圖標。tabletStartupScreen:"images/tablet_statrup.png",//IOS操作系統中，平板電腦主屏幕顯示的圖標。launch:function(){var panel = Ext.create("Ext.Panel",{layout:"card",items:[{style:"background-color:pink",html:"示例組件1"},{style:"background-color:pink",html:"示例組件2"}]});Ext.Viewport.add(panel);panel.setActiveItem(1);} });
效果：
?
示例中有2個子組件，通過setActiveItem設置組件位置“1”，使頁面顯示第二個組件。
為之前的組件設置id
?
launch:function(){var panel = Ext.create("Ext.Panel",{layout:"card",items:[{id:"item1",style:"background-color:pink",html:"示例組件1"},{id:"item2",style:"background-color:pink",html:"示例組件2"}]});Ext.Viewport.add(panel);panel.setActiveItem("item2");}
setActiveItem也可以傳入引用子組件的變量。使用變量p1，p2創建2個面板組件，并在容器中使用items配置項中直接使用這兩個變量，將這兩個面板添加到容器面板組件中，然后對容器面板組件使用setActiveItem方法，來指定顯示的面板。
?
修改后代碼：
?
launch:function(){var p1 = Ext.create("Ext.Panel",{id:"panel1",style:"background-color:pink",html:"示例面板1"});var p2 = Ext.create("Ext.Panel",{id:"panel2",style:"background-color:pink",html:"示例面板2"});var panel = Ext.create("Ext.Panel",{layout:"card",items:[p1,p2]});Ext.Viewport.add(panel);panel.setActiveItem(p2);}?
?
?
?
在指定Card布局的時候，可以添加animation配置選項，方法如下：
?
var panel = Ext.create("Ext.Panel",{layout:"card",animation:{type:"slide",direction:"right",duration:"1000"},items:[p1,p2]});
animation配置的作用為設置容器中子組件在進行切換顯示的時候，所實現的動畫效果。
?
?
| 參數 | 效果 |
| fade | 淡入淡出 |
| slide | 滑動 |
| flip | 翻轉 |
| wipe | 擦除 |
| pop | 炸出 |
| cube | 滑動 |
配置項中type用于設置使用哪種特效，direction用于設置在使用slide特效時兩個面板的滑動方向，duration設置特效時長。
在使用setActiveItem方法切換組建時，并不具有特效，如果做了上面的配置，需要使用animateActiveItem方法來顯示特效，代碼如下：
?
var panel = Ext.create("Ext.Panel",{layout:"card",animation:{type:"slide",direction:"right",duration:"1000"},items:[p1,p2]});Ext.Viewport.add(panel);//panel.setActiveItem(p2);panel.animateActiveItem(p2,"slide");animateActiveItem方法中，第一個參數用于設置顯示的子組件，第二個參數可以是一個字符串，代表使用特效的名稱，也可以是一個配置對象，如：
?
?
animateActiveItem(p2, {type:"slide",direction:"right",duration:"1000"});
Sencha Touche 中Tab面板組件中也可以使用Card布局，所以也可以使用animation來配置組件切換時的特效。
?
修改之前tabTest.js代碼
?
launch:function(){var tabPanel = Ext.create("Ext.TabPanel",{id:"tabPanel",ui:"dark",tabBarPosition:"bottom",layout:{animation:"slide"},items:[{title:"首頁",html:"主頁",iconCls:"home"},{title:"用戶",html:"用戶",iconCls:"user"}]});Ext.Viewport.add(tabPanel);}
在不適用animation配置時，Tab面板組件在子容器組件進行切換顯示時，默認使用slide特效。
?
?
?
?
容器內部組件的停靠
在Sencha Touche中，Default布局是一切布局的基礎，其他所以布局都直接或間接的繼承了該布局。但通常不應該直接使用Default布局，而是使用繼承了Default布局的其他不布局。Default布局的一個重要特性就是支持“?？俊?#xff0c;這意味著其他所有布局都支持內部組件的停靠。
所謂“?？俊?#xff0c;只是容器內部、緊靠組件上邊緣、下邊緣、左邊緣或右邊緣放置一個組件，當被?？康某叽鐢U大時，組件的長度和高度也會隨之擴展。
?
示例：
?
Ext.application({name:"MyApp",icon:"images/icon.png",//應用程序被添加到IOS操作系統中，主屏幕顯示的圖標。glossOnIcon:false,//是否要取消IOS操作系統中主屏幕添加的gloss效果。false：取消。phoneStartupScreen:"images/phone_startup.png",//IOS操作系統中，移動電話主屏幕顯示的圖標。tabletStartupScreen:"images/tablet_statrup.png",//IOS操作系統中，平板電腦主屏幕顯示的圖標。launch:function(){var panel = Ext.create("Ext.Panel",{layout:"hbox",items:[{docked:"top",height:20,style:"background-color:pink;text-align:center",html:"頂部容器"},{id:"item1",flex:1,style:"background-color:purple;",html:"左邊容器"},{id:"item2",flex:1,style:"background-color:green;",html:"右邊容器"}]});Ext.Viewport.add(panel);} });
效果：
?
?
這段代碼中，使用容器組件的docked配置容器組件停靠的位置，該配置可以指定left、top、right、bottom。
?
?
?
Carousel組件
前面對Sencha Touch的布局進行了全面介紹，這里將介紹Sencha Touch中非常重要的容器組件Carousel組件。由于該組件必須要結合Sencha Touch中盒布局一起使用，所以放在布局內容之后介紹。
Carousel組件可以理解為使用了Card布局的容器組件，可以在Carousel中定義多個子組件，到但瀏覽器始終只會顯示一個子容器組件。Carousel組件與其他使用了Card布局的容器不同的是，用戶可以通過拖拽或單擊瀏覽器中顯示的指示來將位于瀏覽器之外的子容器組件移入瀏覽器，同時將當前瀏覽器顯示的子容器組件移除瀏覽器。
在Sencha Touch中通過Ext.carousel.Carousel類來創建Carousel組件，類的別名Ext.Carousel，該類繼承Ext.Container類（定義容器組件），可以直接使用Container類的各種配置項、方法和事件。
?
在新建的項目目錄中，創建carousel.html和carouselTest.js
carouse.html中
?
<!DOCTYPE html> <html><head><title>box.html</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>carousel布局</title><link rel="stylesheet" type="text/css"href="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/css/sencha-touch.css"></link><script type="text/javascript"src="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/js/sencha-touch-all.js"></script><script type="text/javascript"src="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/carousel/carouselTest.js"></script></head><body></body> </html>
carouselTest.js中
?
?
Ext.application({name:"MyApp",icon:"images/icon.png",//應用程序被添加到IOS操作系統中，主屏幕顯示的圖標。glossOnIcon:false,//是否要取消IOS操作系統中主屏幕添加的gloss效果。false：取消。phoneStartupScreen:"images/phone_startup.png",//IOS操作系統中，移動電話主屏幕顯示的圖標。tabletStartupScreen:"images/tablet_statrup.png",//IOS操作系統中，平板電腦主屏幕顯示的圖標。launch:function(){var carousel1 = Ext.create("Ext.Carousel",{ui:"dark",flex:1,direction:"horizontal",//橫向排列defaults:{styleHtmlContent:true},items:[{html:"左視圖",style:"background-color:pink"},{html:"中視圖",style:"background-color:red"},{html:"右視圖",style:"background-color:yellow"}]}); var carousel2 = Ext.create("Ext.Carousel",{ui:"dark",flex:1,direction:"vertical",//縱向排列defaults:{sytleHtmlContent:true},items:[{html:"上視圖",style:"background-color:pink"},{html:"中視圖",style:"background-color:red"},{html:"下視圖",style:"background-color:yellow"}]});var panel = Ext.create("Ext.Panel",{layout:{type:"vbox",align:"stretch"},items:[carousel1,carousel2]});Ext.Viewport.add(panel);} });
效果：
?
?
使用了上下兩個Carousel組件，兩個Carousel組件中都放了3個子容器組件。頁面打開時瀏覽器顯示兩個Carousel組件中的第一個子容器組件，用戶可以向不同的方向拖拽或點擊其中的指示器（瀏覽器中3個小圓點）。
Carousel中direction配置的作用是定義內部子組件的排列方向。horizontal：橫向排列所有子組件、vertical：縱向排列所有子組件。
接下來詳細介紹下Carousel中defaults配置的作用。
在Sencha Touch中，可以為所有容器組件使用defaults配置選項，該配置的作用是為容器組件中所有使用items來添加的子組件進行默認的配置。當然子組件中依然可以重寫配置的方式來修改默認的配置。
如：
?
launch:function(){var panel = Ext.create("Ext.Panel",{layout:{type:"vbox",align:"stretch"},{defaultes:{flex:1},items:{html:"子組件1",style:"background-color:pink"},{html:"子組件2",style:"background-color:blue"}}});Ext.Viewport.add(panel); }?
?
?
代碼中具有一個容器面板，該容器面板中具有上下兩個子組件，雖然沒有單獨使用flex配置來指定子組件的高度，但通過在容器面板中使用defaultes配置，并在配置中使用flex來統一制定所有子容器的高度。
?
Carousel組件中最常用的方法有next、prev、setActiveItem、animateActiveItem方法。
例如：carousel1.next();瀏覽器中顯示的是“中視圖”的組件。prev與next相反，把瀏覽器當前顯示的子容器組件切換顯示成該組件的上一個子容器組件。
?
?
NavigationView組件
NavigationView組件本質上是一個具有Card布局的容器組件，所以每次只顯示一個內部子組件。但是它提供一些附加特效，這使它更像“棧堆”容器組件?？梢詫⒆咏M件堆入該組件中，然后在按照堆入的順序依次取出位于棧頂的子組件。同事，NavigationView組件自動實現了在子組件入棧出棧時的動畫特效、自動實現NavigationView組件中后對按鈕的展示功能、自動執行當用戶點擊后退按鈕時，位于棧頂的子組件的出棧操作。
?
在新建的項目目錄中，創建navigationView.html和navigationViewTest.js
navigationView.html
?
<!DOCTYPE html> <html><head><title>navigationView組件</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>docked</title><link rel="stylesheet" type="text/css"href="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/css/sencha-touch.css"></link><script type="text/javascript"src="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/js/sencha-touch-all.js"></script><script type="text/javascript"src="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/navigationView/navigationViewTest.js"></script></head><body></body> </html>
navigationViewTest.js
?
?
Ext.require("Ext.NavigationView"); Ext.application({name:"MyApp",icon:"images/icon.png",//應用程序被添加到IOS操作系統中，主屏幕顯示的圖標。glossOnIcon:false,//是否要取消IOS操作系統中主屏幕添加的gloss效果。false：取消。phoneStartupScreen:"images/phone_startup.png",//IOS操作系統中，移動電話主屏幕顯示的圖標。tabletStartupScreen:"images/tablet_statrup.png",//IOS操作系統中，平板電腦主屏幕顯示的圖標。launch:function(){var view = Ext.create("Ext.NavigationView",{items:[{title:"標題一",html:"組件1"}]});panel = Ext.create("Ext.Panel",{title:"標題二",html:"組件2"});Ext.Viewport.add(view);view.push(panel);} });
效果：
?
代碼中的push方法將文字為“組件2”的面板組件堆入棧頂，該方法使用一個從參數，代表需要堆入棧頂的組件。
單擊Back按鈕，文字為“組件2”的面板組件被彈出棧外，頁面中顯示文字為“組件1”的容器組件。
?
可以隨時在棧中堆入新的組件，例如：
?
launch:function(){var view = Ext.create("Ext.NavigationView",{items:[{title:"標題一",html:"組件1"}]});panel = Ext.create("Ext.Panel",{title:"標題二",html:"組件2"});Ext.Viewport.add(view);view.push(panel);panel = Ext.create("Ext.Panel",{title:"標題三",html:"組件3"});view.push(panel);}?
?
?
效果：
?
在代碼中可以使用NavigationView組件的pop方法將棧頂的組件彈出棧中，例如：
panel = Ext.create("Ext.Panel",{title:"標題三",html:"組件3"});view.push(panel);view.pop();打開修改后的代碼，文字為“組件3”的面板組件被彈出棧外，頁面中顯示為“組件2”的面板組件。
?
另外，可以使用NavigationView組件的reset方法，將棧中除了底部組件外的其他組件都彈出棧中，然后在瀏覽器中顯示棧中的底部組件，頁面將顯示“組件1”的面板組件。
?
panel = Ext.create("Ext.Panel",{title:"標題三",html:"組件3"});view.push(panel);//view.pop();view.reset();}?
?
?
?
?
?
?
配置NavigationView標題欄，默認情況下標題欄在NavigationView組件的頂部，但可以通過NavigationBar配置項來修改標題的?？课恢煤蜆邮?。
?
var view = Ext.create("Ext.NavigationView",{navigationBar:{ui:"light",docked:"bottom"},items:[{title:"標題一",html:"組件1"}]});
效果：
?
?
?
將NavigationView組件中的useTitleForBackButtonText設置為true，可以將后退（Back）按鈕的文字修改為在棧中，當前組件的后一個組件的標題文字。
?
?
?
?
?
?
?
總結
以上是生活随笔為你收集整理的Sencha Touch（Extjs）的全部內容，希望文章能夠幫你解決所遇到的問題。
