當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Sencha Touch（Extjs）

發(fā)布時(shí)間：2024/1/8 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 Sencha Touch（Extjs）小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

Sencha官方學(xué)習(xí)文檔：http://docs.sencha.com/touch/2.3.1/

Sencha2.3正式版下載：http://www.sencha.com/products/touch/download/sencha-touch-2.3.0/2920

Sencha中文學(xué)習(xí)站：http://www.extjs.org.cn/

Sencha示例：http://dev.sencha.com/deploy/touch/examples/production/kitchensink/#demo/buttons

Sencha權(quán)威指南（現(xiàn)在唯一能找到的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

預(yù)：對Sencha的介紹網(wǎng)上不少，可以先了解，這里直接進(jìn)入學(xué)習(xí)案例。

----------------------------------------------------------------------------------------------------------------------------------------------------

準(zhǔn)備

將下載后的Sencha2.3壓縮包，解壓到任意盤。打開解壓后的文件夾，先初步了解目錄結(jié)構(gòu)。

builds：不能編譯應(yīng)用程序時(shí)（如不能下載Sencha Touch的SDK工具）時(shí)，能讓應(yīng)用程序正常運(yùn)行所使用的框架核心文件。

cmd：包含創(chuàng)建或發(fā)布MVC模式的應(yīng)用程序時(shí)必須使用的一些文件。

docs：Sencha Touch API文檔。

examples：實(shí)例。

microloader：包含創(chuàng)建或發(fā)布MVC模式的應(yīng)用程序時(shí)必須使用的一些文件，可與cmd文件夾中的文件結(jié)合使用。

resources：資源文件夾，如css文件，images文件。

src：Sencha Touch源碼。

----------------------------------------------------------------------------------------------------------------------------------------------------

示例

在任意位置新建一個(gè)目錄（如：E:/stormSanCha），在目錄中新建css文件夾，images文件夾。

將剛才解壓出來的touch2.3.0文件夾中的：src，sencha-touch-all.js復(fù)制到該目錄下，resources文件夾下的css文件夾下的sencha-touch.css復(fù)制到該目錄下的css文件夾中。

到這里示例的基本條件已經(jīng)滿足。

第一個(gè)示例頁面：

在新建的項(xiàng)目目錄中，創(chuàng)建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>一個(gè)簡單面板</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",//應(yīng)用程序被添加到IOS操作系統(tǒng)中，主屏幕顯示的圖標(biāo)。glossOnIcon:false,//是否要取消IOS操作系統(tǒng)中主屏幕添加的gloss效果。false：取消。phoneStartupScreen:"images/phone_startup.png",//IOS操作系統(tǒng)中，移動電話主屏幕顯示的圖標(biāo)。tabletStartupScreen:"images/tablet_statrup.png",//IOS操作系統(tǒng)中，平板電腦主屏幕顯示的圖標(biāo)。launch:function(){//創(chuàng)建面板方式一var panel = Ext.create("Ext.Panel",{fullscreen:true,id:"myPanel",html:"一個(gè)簡單的面板"});Ext.get("myPanel").addCls("colorRed");//為組件添加樣式//創(chuàng)建面板方式二var subPanel = new Ext.Panel({id:"subPanel",html:"面板中的子面板"});Ext.Viewport.add(panel);Ext.ComponentManager.get('myPanel').add(subPanel);} });

效果如下：

Tab面板組件

在Sencha中使用Ext.tab.Panel來創(chuàng)建Tab面板，該類繼承Ext.Container類，類的別名為Ext.TabPanel。可以通過Ext.TabPanel類的items配置選項(xiàng)來定義Tab面板中所包含的多個(gè)子組件。

在新建的項(xiàng)目目錄中，創(chuàng)建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中

效果

Sencha Touch中內(nèi)置圖片樣式效果：

圖標(biāo)名稱	樣式名稱	顯示效果
添加圖標(biāo)	add
附件	attachment
書簽	bookmarks
編輯	compose
刪除	delete
首頁	home
定位	locate
地圖	maps
排序	organize
刷新	refresh
回應(yīng)	reply
搜索	search
回收站	trash
action	action
向上箭頭	arrow_up
向下箭頭	arrow_down
向左箭頭	arrow_left
向右箭頭	arrow_right
星圖標(biāo)	star
下載	download
收藏夾	favorites
信息	info
省略	more
設(shè)置	settings
組隊(duì)	team
時(shí)間	time
用戶	user

Tab面板組件

使用Ext.layout.AbstractBoxLayout類來實(shí)現(xiàn)盒布局，但不是直接使用，必須繼承BoxLayout的兩個(gè)子類。

HBoxLayout類水平布局，VBoxLayout垂直布局。

1，水平盒布局使用

在新建的項(xiàng)目目錄中，創(chuàng)建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中

效果：

代碼中使用items配置選項(xiàng)定了兩個(gè)子組件，使用layout定義面板使用的布局方式。

type：指定容器組件的布局方式，本文使用hbox水平布局。

align：指定容器中子組件的垂直對齊方式。默認(rèn)為center，表示子組件的縱向?qū)R方式。可以使用pack來配置橫向?qū)R方式。

配置選項(xiàng)	選項(xiàng)值	對齊方式
align	center	中央對齊
align	start	頂部對齊
align	end	底部對齊
align	stretch	子組件的高度自動擴(kuò)展為容器高度
pack	center	中央對齊
pack	start	向左對齊
pack	end	向右對齊
pack	justify	兩端對齊

代碼中每一個(gè)子組件都使用了一個(gè)flex配置選項(xiàng)（所有繼承了容器的組件都具有該配置選項(xiàng)）。當(dāng)使用水平盒布局時(shí)，該配置用來指定每一個(gè)子組件的高度。使用整數(shù)來指定該配置的選項(xiàng)值，該整數(shù)表示每一子組件占寬度占容器總寬度的百分比。本文中，容器面板的寬度為瀏覽器寬度，第一個(gè)子組件flex配置值為1，第二個(gè)子組件flex配置值為2，所得寬度：

第一個(gè)子組件：

（flex配置選項(xiàng)值1/flex配置選項(xiàng)值的綜合3）*瀏覽器寬度 = 瀏覽器寬度的1/3

第二個(gè)子組件

（flex配置選項(xiàng)值2/flex配置選項(xiàng)值的綜合3）*瀏覽器寬度 = 瀏覽器寬度的2/3

在配置選項(xiàng)可以同事使用width和flex來配置寬度

修改items內(nèi)代碼：

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;"}]

第一個(gè)子組件的寬度：

（flex配置選項(xiàng)值1/flex配置選項(xiàng)值的總和3）*（瀏覽器總寬度-200）= （瀏覽器總寬度-200）*1/3

第二個(gè)子組件的寬度：

（flex配置選項(xiàng)值2/flex配置選項(xiàng)值的總和3）*（瀏覽器總寬度-200）= （瀏覽器總寬度-200）*2/3

第三個(gè)子組件的寬度：200

2.垂直盒布局使用

修改布局方式type為vbox，其余配置當(dāng)是水平布局時(shí)設(shè)置寬度，當(dāng)是垂直布局時(shí)設(shè)置高度。

效果：

Fig布局

這里介紹2個(gè)非常重要的布局：Fit布局與Card布局，其中Fit布局通過Ext.layout.FitLayout類來實(shí)現(xiàn)。

當(dāng)容器組件中只有一個(gè)子組件時(shí)，通過Fit布局來將子組件的尺寸自動擴(kuò)展至父容器組件的尺寸，使其充滿整個(gè)父容器組件內(nèi)部。

在新建的項(xiàng)目目錄中，創(chuàng)建fit.html和fitTest.js

首先看一個(gè)沒有使用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>

效果：

為了讓子組件的尺寸自動擴(kuò)展為父容器面板的尺寸，修改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>

效果：

可以看出子組件的尺寸自動擴(kuò)展為父容器的尺寸。

在使用Fit布局的時(shí)候，父容器中應(yīng)該只存在一個(gè)子組件，如果存在多個(gè)子組件，將只會顯示一個(gè)。

例如：

效果：

可以看到雖然父容器中有2個(gè)子組件，但使用Fit布局時(shí)，只會顯示一個(gè)子組件。

Card布局

Card布局通過Ext.layout.FitLayout類的子類Ext.layout.CardLayout類來實(shí)現(xiàn)。Card容器用來對容器組件的多個(gè)子組件進(jìn)行管理。

Card布局使用如下：

layout："card"

與Card配合使用的一個(gè)最重要的方法是setActiveItem方法，應(yīng)為瀏覽器始終只顯示一個(gè)子組件，所以必須通過該方法來告訴瀏覽器顯示哪一個(gè)組件，從而實(shí)現(xiàn)不同子組件之間的切換。setActiveItem使用如下：

panel.setActiveItem(newCard)；

panel表示父容器組件對象，newCard可以是一個(gè)代表子組件的唯一id，也可以是組件集合中的序號（第一個(gè)子組件為0），甚至可以是一個(gè)代表子組件的變量。

在新建的項(xiàng)目目錄中，創(chuàng)建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中

效果：

示例中有2個(gè)子組件，通過setActiveItem設(shè)置組件位置“1”，使頁面顯示第二個(gè)組件。

為之前的組件設(shè)置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創(chuàng)建2個(gè)面板組件，并在容器中使用items配置項(xiàng)中直接使用這兩個(gè)變量，將這兩個(gè)面板添加到容器面板組件中，然后對容器面板組件使用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布局的時(shí)候，可以添加animation配置選項(xiàng)，方法如下：

var panel = Ext.create("Ext.Panel",{layout:"card",animation:{type:"slide",direction:"right",duration:"1000"},items:[p1,p2]});

animation配置的作用為設(shè)置容器中子組件在進(jìn)行切換顯示的時(shí)候，所實(shí)現(xiàn)的動畫效果。

參數(shù)	效果
fade	淡入淡出
slide	滑動
flip	翻轉(zhuǎn)
wipe	擦除
pop	炸出
cube	滑動

配置項(xiàng)中type用于設(shè)置使用哪種特效，direction用于設(shè)置在使用slide特效時(shí)兩個(gè)面板的滑動方向，duration設(shè)置特效時(shí)長。

在使用setActiveItem方法切換組建時(shí)，并不具有特效，如果做了上面的配置，需要使用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方法中，第一個(gè)參數(shù)用于設(shè)置顯示的子組件，第二個(gè)參數(shù)可以是一個(gè)字符串，代表使用特效的名稱，也可以是一個(gè)配置對象，如：

animateActiveItem(p2, {type:"slide",direction:"right",duration:"1000"});

Sencha Touche 中Tab面板組件中也可以使用Card布局，所以也可以使用animation來配置組件切換時(shí)的特效。

修改之前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配置時(shí)，Tab面板組件在子容器組件進(jìn)行切換顯示時(shí)，默認(rèn)使用slide特效。

容器內(nèi)部組件的停靠

在Sencha Touche中，Default布局是一切布局的基礎(chǔ)，其他所以布局都直接或間接的繼承了該布局。但通常不應(yīng)該直接使用Default布局，而是使用繼承了Default布局的其他不布局。Default布局的一個(gè)重要特性就是支持“停靠”，這意味著其他所有布局都支持內(nèi)部組件的停靠。

所謂“停靠”，只是容器內(nèi)部、緊靠組件上邊緣、下邊緣、左邊緣或右邊緣放置一個(gè)組件，當(dāng)被停靠的尺寸擴(kuò)大時(shí)，組件的長度和高度也會隨之?dāng)U展。

示例：

效果：

這段代碼中，使用容器組件的docked配置容器組件停靠的位置，該配置可以指定left、top、right、bottom。

Carousel組件

前面對Sencha Touch的布局進(jìn)行了全面介紹，這里將介紹Sencha Touch中非常重要的容器組件Carousel組件。由于該組件必須要結(jié)合Sencha Touch中盒布局一起使用，所以放在布局內(nèi)容之后介紹。

Carousel組件可以理解為使用了Card布局的容器組件，可以在Carousel中定義多個(gè)子組件，到但瀏覽器始終只會顯示一個(gè)子容器組件。Carousel組件與其他使用了Card布局的容器不同的是，用戶可以通過拖拽或單擊瀏覽器中顯示的指示來將位于瀏覽器之外的子容器組件移入瀏覽器，同時(shí)將當(dāng)前瀏覽器顯示的子容器組件移除瀏覽器。

在Sencha Touch中通過Ext.carousel.Carousel類來創(chuàng)建Carousel組件，類的別名Ext.Carousel，該類繼承Ext.Container類（定義容器組件），可以直接使用Container類的各種配置項(xiàng)、方法和事件。

在新建的項(xiàng)目目錄中，創(chuàng)建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",//應(yīng)用程序被添加到IOS操作系統(tǒng)中，主屏幕顯示的圖標(biāo)。glossOnIcon:false,//是否要取消IOS操作系統(tǒng)中主屏幕添加的gloss效果。false：取消。phoneStartupScreen:"images/phone_startup.png",//IOS操作系統(tǒng)中，移動電話主屏幕顯示的圖標(biāo)。tabletStartupScreen:"images/tablet_statrup.png",//IOS操作系統(tǒng)中，平板電腦主屏幕顯示的圖標(biāo)。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);} });

效果：

使用了上下兩個(gè)Carousel組件，兩個(gè)Carousel組件中都放了3個(gè)子容器組件。頁面打開時(shí)瀏覽器顯示兩個(gè)Carousel組件中的第一個(gè)子容器組件，用戶可以向不同的方向拖拽或點(diǎn)擊其中的指示器（瀏覽器中3個(gè)小圓點(diǎn)）。

Carousel中direction配置的作用是定義內(nèi)部子組件的排列方向。horizontal：橫向排列所有子組件、vertical：縱向排列所有子組件。

接下來詳細(xì)介紹下Carousel中defaults配置的作用。

在Sencha Touch中，可以為所有容器組件使用defaults配置選項(xiàng)，該配置的作用是為容器組件中所有使用items來添加的子組件進(jìn)行默認(rèn)的配置。當(dāng)然子組件中依然可以重寫配置的方式來修改默認(rèn)的配置。

如：

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); }

代碼中具有一個(gè)容器面板，該容器面板中具有上下兩個(gè)子組件，雖然沒有單獨(dú)使用flex配置來指定子組件的高度，但通過在容器面板中使用defaultes配置，并在配置中使用flex來統(tǒng)一制定所有子容器的高度。

Carousel組件中最常用的方法有next、prev、setActiveItem、animateActiveItem方法。

例如：carousel1.next();瀏覽器中顯示的是“中視圖”的組件。prev與next相反，把瀏覽器當(dāng)前顯示的子容器組件切換顯示成該組件的上一個(gè)子容器組件。

NavigationView組件

NavigationView組件本質(zhì)上是一個(gè)具有Card布局的容器組件，所以每次只顯示一個(gè)內(nèi)部子組件。但是它提供一些附加特效，這使它更像“棧堆”容器組件。可以將子組件堆入該組件中，然后在按照堆入的順序依次取出位于棧頂?shù)淖咏M件。同事，NavigationView組件自動實(shí)現(xiàn)了在子組件入棧出棧時(shí)的動畫特效、自動實(shí)現(xiàn)NavigationView組件中后對按鈕的展示功能、自動執(zhí)行當(dāng)用戶點(diǎn)擊后退按鈕時(shí)，位于棧頂?shù)淖咏M件的出棧操作。

在新建的項(xiàng)目目錄中，創(chuàng)建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",//應(yīng)用程序被添加到IOS操作系統(tǒng)中，主屏幕顯示的圖標(biāo)。glossOnIcon:false,//是否要取消IOS操作系統(tǒng)中主屏幕添加的gloss效果。false：取消。phoneStartupScreen:"images/phone_startup.png",//IOS操作系統(tǒng)中，移動電話主屏幕顯示的圖標(biāo)。tabletStartupScreen:"images/tablet_statrup.png",//IOS操作系統(tǒng)中，平板電腦主屏幕顯示的圖標(biāo)。launch:function(){var view = Ext.create("Ext.NavigationView",{items:[{title:"標(biāo)題一",html:"組件1"}]});panel = Ext.create("Ext.Panel",{title:"標(biāo)題二",html:"組件2"});Ext.Viewport.add(view);view.push(panel);} });

效果：

代碼中的push方法將文字為“組件2”的面板組件堆入棧頂，該方法使用一個(gè)從參數(shù)，代表需要堆入棧頂?shù)慕M件。

單擊Back按鈕，文字為“組件2”的面板組件被彈出棧外，頁面中顯示文字為“組件1”的容器組件。

可以隨時(shí)在棧中堆入新的組件，例如：

launch:function(){var view = Ext.create("Ext.NavigationView",{items:[{title:"標(biāo)題一",html:"組件1"}]});panel = Ext.create("Ext.Panel",{title:"標(biāo)題二",html:"組件2"});Ext.Viewport.add(view);view.push(panel);panel = Ext.create("Ext.Panel",{title:"標(biāo)題三",html:"組件3"});view.push(panel);}

效果：

在代碼中可以使用NavigationView組件的pop方法將棧頂?shù)慕M件彈出棧中，例如：

panel = Ext.create("Ext.Panel",{title:"標(biāo)題三",html:"組件3"});view.push(panel);view.pop();

打開修改后的代碼，文字為“組件3”的面板組件被彈出棧外，頁面中顯示為“組件2”的面板組件。

另外，可以使用NavigationView組件的reset方法，將棧中除了底部組件外的其他組件都彈出棧中，然后在瀏覽器中顯示棧中的底部組件，頁面將顯示“組件1”的面板組件。

panel = Ext.create("Ext.Panel",{title:"標(biāo)題三",html:"組件3"});view.push(panel);//view.pop();view.reset();}

配置NavigationView標(biāo)題欄，默認(rèn)情況下標(biāo)題欄在NavigationView組件的頂部，但可以通過NavigationBar配置項(xiàng)來修改標(biāo)題的停靠位置和樣式。

var view = Ext.create("Ext.NavigationView",{navigationBar:{ui:"light",docked:"bottom"},items:[{title:"標(biāo)題一",html:"組件1"}]});

效果：

將NavigationView組件中的useTitleForBackButtonText設(shè)置為true，可以將后退（Back）按鈕的文字修改為在棧中，當(dāng)前組件的后一個(gè)組件的標(biāo)題文字。

總結(jié)

以上是生活随笔為你收集整理的Sencha Touch（Extjs）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。