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

编程问答

Ext常用组件

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

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

視頻課：https://edu.csdn.net/course/play/7621

表單是客戶端和服務(wù)器交互的一種重要方式，Ext表單控件在界面體驗(yàn)效果的美觀度及功能的全面性上都有著首屈一指的影響力，表面上，表單控件只是添加了一些 CSS樣式，但它在數(shù)據(jù)校驗(yàn)方面非常靈活。

實(shí)際上，Ext提供的功能遠(yuǎn)不止這些，它還可以使不同的消息對(duì)話框更加美觀、容易配置、拖動(dòng)等，這都是傳統(tǒng)的頁(yè)面方式無(wú)法比擬的。

此外，Ext的樹(shù)形結(jié)構(gòu)是Ext框架的重要組成部分，可以動(dòng)態(tài)添加、刪除或修改節(jié)點(diǎn)，實(shí)現(xiàn)拖拽和右鍵菜單等功能，而且其界面和動(dòng)畫(huà)十分美觀。本章將分別從Ext的消息對(duì)話框、表單控件以及Ext樹(shù)形結(jié)構(gòu)開(kāi)始，詳細(xì)講解Ext常用控件。?

核心技能部分

1.1?Ext消息對(duì)話框

傳統(tǒng)方法（alert、confirm等）產(chǎn)生的對(duì)話框非常呆板，對(duì)界面的體驗(yàn)效果產(chǎn)生了負(fù)面影響。ExtJS 提供了一套非常漂亮的對(duì)話框，可以實(shí)現(xiàn)華麗的應(yīng)用程序界面。

1.1.1?Ext.MessageBox介紹

Ext中的 MessageBox是一種特殊的窗口，配置簡(jiǎn)單，可以任意拖動(dòng)、擺放，也可以實(shí)現(xiàn)對(duì)任何控件的使用。Ext.MessageBox 是一個(gè)用于產(chǎn)生不同風(fēng)格提示框的實(shí)體類，它的另一種寫(xiě)法是 Ext.Msg。與傳統(tǒng)瀏覽器的 alert 提示不同，Ext.MessageBox是異步的，在顯示一個(gè) Ext.MessageBox時(shí)并不會(huì)停止代碼的運(yùn)行。因此，代碼需要獲得用戶反饋后再運(yùn)行時(shí)，必須使用回調(diào)函數(shù)。Ext.MessageBox為程序員提供了彈出提示框的簡(jiǎn)單方法，使用它提供的 alert、confirm、prompt等對(duì)話框完全可以替代傳統(tǒng)的同類對(duì)話框。此外，Ext.MessageBox還提供了進(jìn)度條等功能。

1.1.2?Ext. MessageBox. alert()

Ext.MessageBox.alert（）一般包含 title、msg 和 function 這 3 個(gè)參數(shù)。其中，title 指窗口的標(biāo)題，msg 指窗口的內(nèi)容，function 指點(diǎn)擊關(guān)閉按鈕后執(zhí)行的函數(shù)。

Alert(title，msg，function(){} )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

<p><button id="messageBox1">Click Me</button></p>

Ext.onReady(function(){

Ext.get('messageBox1').on('click',function(){

Ext.MessageBox.alert('狀態(tài)','保存成功');

});

</script>

</body>

</html>

示例 3.1 實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的 alert對(duì)話框

1.1.3?Ext. MessageBox. confirm()

Ext.MessageBox.confirm（）方法基本上與 alert（）方法相同調(diào)用該方法后，程序?qū)⑸蒾k和cancel兩個(gè)值。

Ext.MessageBox.confirm(String title,String msg,Function fn);

Ext.MessageBox.confirm中有值yes和no。一個(gè)是/否的對(duì)話框代碼如下：

<body>

<p><button id="messageBox1">Click Me</button></p>

Ext.onReady(function(){

Ext.get('messageBox1').on('click',function(){

Ext.MessageBox.confirm('確認(rèn)','您確定要執(zhí)行此操作嗎？');

});

</script>

</body>

示例3.2實(shí)現(xiàn)了一個(gè)是/ 否的對(duì)話框

提示：如果按鈕的文字要顯示中文，可以引入下面一個(gè)文件：

1.1.4?Ext. MessageBox. prompt()

Ext.MessageBox.prompt（）方法用于產(chǎn)生輸入框，相當(dāng)于Window.prompt（）方法。

Ext.MessageBox.prompt(String title,String msg,Function fn,Object Xope,Boolean/Number multiline);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

????<p>------------------------</p>

????<p>交互對(duì)話框</p>

????<p><button id="messageBox1">click me</button></p>

</center>

</body>

Ext.onReady(function(){

Ext.get('messageBox1').on('click',function(){

Ext.MessageBox.prompt('金額','請(qǐng)輸入充值金額:'); });

});

</script>

</html>

示例 3.3 實(shí)現(xiàn)了一個(gè)可輸入充值卡金額的對(duì)話框

修改示例 3.3，處理用戶點(diǎn)擊 “ok”與 “cancel” 的不同點(diǎn)擊事件

Ext.onReady(function(){

Ext.get('messageBox1').on('click',function(){

Ext.MessageBox.prompt('金額','請(qǐng)輸入充值金額：',function(bt,text){

if(bt == 'ok'){

Ext.MessageBox.alert('狀態(tài)','您輸入的充值金額：' + text);

}else{

Ext.MessageBox.alert('狀態(tài)','您取消了充值!');

} ???

???});

});

</script>

1.1.5?Ext. MessageBox. show()

Ext.MessageBox.show（）方法功能非常強(qiáng)大，使用 config 配置形式比前面的方法更方便。該方法的參數(shù)很多，最常用的配置參數(shù)見(jiàn)表 3-1-1。

表 3-1-1 ???Ext.MessageBox.show() 參數(shù)

參數(shù)	說(shuō)明
animal	對(duì)話框彈出和關(guān)閉時(shí)動(dòng)畫(huà)效果，設(shè)置為“idName”則從idName處彈出并產(chǎn)生動(dòng)畫(huà)，收起動(dòng)畫(huà)則相反。
buttons	彈出框按鈕的設(shè)置，主要包括：Ext.Msg.OK、Ext.Msg.OKCANCEL、Ext.Msg.CANCEL、Ext.Msg.YESNO、Ext.Msg.YESNOCANCEL
closable	默認(rèn)為true，如果為false，則不顯示右上角的關(guān)閉按鈕
msg	消息的內(nèi)容
title	標(biāo)題
fn	關(guān)閉彈出框后執(zhí)行的函數(shù)
icon	彈出框內(nèi)容前面的圖標(biāo)，取值為：Ext.MessageBox.INFO、Ext.MessageBox.ERROR、Ext.MessageBox.WARNING、Ext.MessageBox.QUESTION
width	彈出框的寬度，不帶單位
prompt	設(shè)為true，則彈出框帶有輸入框
multiline	設(shè)為true，則彈出框帶有多行輸入框
progress	設(shè)為true，顯示進(jìn)度條
progressText	在進(jìn)度條上顯示的文本
wait	設(shè)為true，動(dòng)態(tài)顯示 progress
waiting	配置參數(shù)，以控制 progress 的顯示

使用 Ext.MessageBox.show（）制作帶 Yes/No/Cancel 的對(duì)話框. 代碼如下：

Ext.onReady(function(){

Ext.get('messageBox1').on('click',function(e){

Ext.MessageBox.show({

title:'保存?',

msg:'您正在關(guān)閉一個(gè)沒(méi)有保存的表單,您要保存嗎?',

buttons:Ext.MessageBox.YESNOCANCEL,

animEl:'messageBox1'

});

</script>

在實(shí)際應(yīng)用中，執(zhí)行十分耗時(shí)的操作時(shí)，需要使用進(jìn)度條提示用戶耐心等候。在Ext 中，可以使用 Ext.MessageBox.show（）制作簡(jiǎn)單的進(jìn)度條。Ext.MessageBox.show（）中提供了一個(gè)默認(rèn)的進(jìn)度條，此進(jìn)度條在progress被設(shè)置為 true后出現(xiàn)在對(duì)話框中，代碼如下：

Ext.MessageBox.show({

title:'請(qǐng)稍等...',

msg:'處理中...',

width:300,

progress:true,

closable:false,

animEl:'messageBox1'

});

由圖3.1.7?可知，進(jìn)度條的狀態(tài)不能輕易向前推進(jìn)，可以使用 Ext.MessageBox.updateProgress（）函數(shù)改善進(jìn)度條狀態(tài)。一般情況下，進(jìn)度條可以不直接關(guān)閉，而是使用 closable：false 隱藏對(duì)話框的關(guān)閉按鈕。

為了使進(jìn)度條變化更加形象，使用timeout定時(shí)器對(duì)進(jìn)度條進(jìn)行修改，使進(jìn)度條的狀態(tài)隨時(shí)間變化，為用戶顯示進(jìn)度的百分比。

Ext.onReady(function(){

Ext.get('messageBox1').on('click',function(){

Ext.MessageBox.show({

title:'請(qǐng)稍等...',

msg:'處理中...',

width:300,

progress:true,

closable:false,

animEl:'messageBox1'

});

var fv = function(v){

return function(){

if(v == 100){ Ext.MessageBox.hide();}

else{Ext.MessageBox.updateProgress(v/100,'內(nèi)容加載中，進(jìn)度'+ v + ' %...');}

}

for(var i=1; i<101; i++){

setTimeout(fv(i),i*100);

}

});

</script>

1.2?Ext表單控件

表面上，Ext表單控件只是修改了 CSS 樣式，但在漂亮的界面下隱藏的仍然是input控件。表單除了前面的功能外還需要數(shù)據(jù)校驗(yàn)、數(shù)據(jù)校驗(yàn)失敗的提示等，這些功能在傳統(tǒng)的表單控件中沒(méi)有良好的處理方式。在Ext 中，可以通過(guò)表單和對(duì)應(yīng)的輸入控件，輕易地校驗(yàn)數(shù)據(jù)，并在校驗(yàn)失敗后給予提示，為用戶提供良好的交互體驗(yàn)。

1.2.1?Ext表單

使用表單控件，制作簡(jiǎn)單的Ext表單。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

Ext.onReady(function(){

var form = new Ext.form.FormPanel({

defaultType: 'textfield',

labelAlign: 'right',

title: 'form',

labelWidth: 60,

buttonAlign: 'center',

frame: true,

width: 220,

items: [{fieldLabel: 'userName'}],

buttons: [{text: '提交'},{text: '重置'}],

});

form.render("myForm");

});

</script>

</body>

</html>

上述代碼創(chuàng)建的 Ext表單中，包含一個(gè)單行輸入框和兩個(gè)按鈕（提交、重置）

制作一個(gè) Ext.form.FormPanel，然后設(shè)置 field。FormPanel 是 Ext.Panel 的子類，可以對(duì)其執(zhí)行各種 Panel 的操作。使用 FormPanel 的最大優(yōu)勢(shì)是易于布局，Ext.form.FormPanel繼承了 Ext.Panel。 Panel 可以將 Ext.form.FormPanel 放入 Ext.Viewport 中作為整個(gè)頁(yè)面布局的一部分，同時(shí)利用items指定 Ext.form.FormPanel 內(nèi)部的子組件。

1.2.2?Ext表單控件

Ext提供了許多表單控件，包括 TextField、TextArea、CheckBox、Radio、ComboBox、DateField、HtmlEditor、Hidden 和 TimeField。

1. 基本輸入控件 Ext.form.Field

Ext.form.Field是所有表單輸入控件的基類，其他輸入控件都由它擴(kuò)展而來(lái)。該控件定義了輸入控件的通用屬性和功能函數(shù)，這些屬性和功能函數(shù)大致分為 3 類：頁(yè)面顯示樣式、控件參數(shù)配置和數(shù)據(jù)有效性校驗(yàn)。

（1）頁(yè)面顯示樣式：clearCls、cls、fieldClass、focusClass、itemCls、invalidClass、labelStyle等屬性，分別用于定義不同狀態(tài)下輸入框采用的樣式。

（2）控件參數(shù)配置：autoCreate、disabled、fieldLabel、hideLabel、inputType、labelSeparator、name、readOnly、tablndex、value等屬性。

（3）數(shù)據(jù)有效性檢驗(yàn)：invalidText、msgFx、msgTarget、validateOnBlue、validateDelay、validateEvent等屬性。

以下將通過(guò)數(shù)據(jù)驗(yàn)證說(shuō)明 Field。在默認(rèn)的情況下，表單驗(yàn)證的輸入控件會(huì)監(jiān)聽(tīng)blur事件，數(shù)據(jù)驗(yàn)證失敗則會(huì)根據(jù) msgTarget的設(shè)置顯示錯(cuò)誤消息。通常，msgTarget可以被設(shè)置為 qtip、title、side或 under，根據(jù)不同的設(shè)置，錯(cuò)誤信息將以指定的方式顯示。所有的輸入控件都繼承 Ext.form. Field，所以任何表單輸入控件都可以改變其錯(cuò)誤消息的顯示方式。用戶登錄的驗(yàn)證代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

Ext.onReady(function(){

var field1 = new Ext.form.Field( { fieldLabel: 'userName' , msgTarget:'qtip'} );

var field2 = new Ext.form.Field( { fieldLabel: 'password' , msgTarget:'title'} );

var form = new Ext.form.FormPanel( {

defaultType: 'textfield',

title:'form',

buttonAlign: 'center',

frame:true,

width: 320,

items: [field1,field2],

buttons:[{text: '提交'}]

?} );

?form.render("form");

?field1.markInvalid();

?field2.markInvalid();

});

</script>

</body>

</html>

上述代碼使用 marklnvalid（）函數(shù)顯示 field 的錯(cuò)誤信息樣式。其中，msgTarget分別設(shè)置為 qtip 和title。運(yùn)行程序

2. 文本輸入控件 Ext.form.TextField

Ext.form.TextField繼承自 Ext.form.Field，是專用于輸人文本的輸入控件。除了 Field 的功能外，此控件最主要的特性是檢查輸入框數(shù)據(jù)是否為空以及數(shù)據(jù)的最大、最小長(zhǎng)度。添加 TextField功能，代碼如下：

var field3 = new Ext.form.TextField({ ?

fieldLabel: 'tel',

allowBlank: false,

emptyText: 'empty',

maxLength: 16,

minLength: 8,

msgTarget: 'title'

});

3. 多文本輸入控件 Ext.form.TextArea

Ext.form.TextArea與Ext.formiTextField都是用于輸人文本的輸入控件，但是，TextArea可以輸入多行文本。

?var field4 = new Ext.form.TextArea({

?width: 122,

?grow: true,

?preventScrollbars:true,

?fieldLabel: '備注',

?emptyText: '請(qǐng)輸入備注信息',

?maxLength: 100,

?minLength: 10

});

var form = new Ext.form.FormPanel( {

defaultType: 'textfield',

title:'form',

buttonAlign: 'center',

frame:true,

width: 320,

items: [field1,field2,field3,field4],

buttons:[{text: '提交'}]

?} );

4. 日期輸入控件 Ext.form.DateField

Ext.form.DateField 是常用的日期選擇控件。除了選擇日期功能外，此控件還支持 Ext.form.TextField和 Ext.form.Field 中定義的功能。

var field5 = new Ext.form.DateField({

?fieldLabel: '出生日期',

?allowBlank: false,

?emptyText: '請(qǐng)輸入出生日期',

?format: 'Y-m-d',

?disabledDays:[0,6]

});

5. 時(shí)間輸入控件 Ext.form.TimeField

使用日期控件后，有時(shí)應(yīng)用程序還需要精確到日期的具體時(shí)間。Ext.form.TimeField是用于選擇時(shí)間的輸入控件，它可以通過(guò)指定一天的開(kāi)始時(shí)間、結(jié)束時(shí)間以及時(shí)間間隔選擇時(shí)間。

var field6 = new Ext.form.TimeField({

fieldLabel: '時(shí)間',

emptyText: '請(qǐng)選擇',

minValue: '1:00 AM',

maxValue: '23:00 PM',

increment:60

});

6. 在線編輯器控件 Ext.form.HtmlEditor

HTML 中包含許多在線編輯器，但其使用較復(fù)雜。Ext提供了簡(jiǎn)單的在線編輯器控件 Ext.form.HtmlEditor，可以對(duì)文本進(jìn)行各項(xiàng)設(shè)置。

var field7 = new Ext.form.HtmlEditor( {

fieldLabel: '自我介紹',

anableAlignments:true,

enableColors:true,

enableFont: true,

enableFontSize: true,

enableLinks: true,

enableFormat: true,

enableLists: true,

enableSourceEdit: true,

autoHeight: 'auto',

anchor: '90%'

}); ??

由以上代碼可知，可以通過(guò)相應(yīng)的enable選項(xiàng)啟用或禁用來(lái)設(shè)置各種功能

7. 隱藏域控件 Ext.form.Hidden

在實(shí)際應(yīng)用中，修改記錄信息時(shí)，信息 ID 一般不顯示給用戶，但該 ID 需要在頁(yè)面使用時(shí)，一般必須隱藏 ID 值。在Ext 中，可以使用隱藏域控件 Ext.form.Hidden 來(lái)隱藏不需要呈現(xiàn)給用戶的信息，該控件直接繼承自 Ext.form.Field，通過(guò)Hidden的 setValue（）和 getValue（）函數(shù)賦值和取值，且值不顯示在頁(yè)面上。

var field8 = new Ext.form.Hidden({

fieldLabel: 'empId'

});

field8.setValue('0003');

var empId = field8.getValue(); ??

運(yùn)行上述代碼，頁(yè)面中將產(chǎn)生隱藏域 empId=0003。

1.2.3?表單提交

表單最重要的功能就是向后臺(tái)提交數(shù)據(jù)，下面通過(guò)一個(gè)注冊(cè)功能演示Ext表單提交，Ext代碼如下所示。

Ext.onReady(function() {

var form = new Ext.form.FormPanel( {

title : '用戶登陸',

bodyStyle : 'padding:15px',

frame : true,

layout : 'form',

width : 350,

defaultType : 'textfield',

defaults : {

width : 230

labelAlign : 'right',

buttonAlign : 'center',

labelWidth : 65,

labelPad : 13,

url:'login_action.jsp',

items : [ {

fieldLabel : '賬號(hào)',

name : 'name',

allowBlank : false

}, {

fieldLabel : '密碼',

inputType : 'password',

name : 'password'

} ],

buttons : [ {

text : '提交',

listeners:{

click:function(){

form.getForm().submit({

success:function(f,a){

Ext.Msg.alert("提示",a.result.msg);

failure:function(f,a){

Ext.Msg.alert("提示",a.result.msg);

}

});

}

}, {

text : '取消'

} ]

});

form.render("form");

});

上面代碼中，為了提交數(shù)據(jù)，要為form設(shè)置一個(gè)url參數(shù)，表示表單數(shù)據(jù)提交到該路徑。記得要給TextField加上一個(gè)name屬性，這樣后臺(tái)程序才可以通過(guò)這個(gè)屬性值獲取提交的值。最后看Ext的按鈕，在【提交】按鈕上，使用listeners配置項(xiàng)處理事件，值是一個(gè)JSON對(duì)象，該JSON對(duì)象的屬性是事件名稱，值是事件處理函數(shù)。在本例中當(dāng)點(diǎn)擊按鈕后，獲取FormPanel包含的BasicForm對(duì)象，然后再調(diào)用submit()函數(shù)即可完成提交。

在本例中的提交到的后臺(tái)程序login_action.jsp代碼如下所示。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

String name = request.getParameter("name");

String password = request.getParameter("password");

if("admin".equals(name)&&"admin".equals(password)){

out.print("{success:true,msg:'登陸成功，正在轉(zhuǎn)向主頁(yè)面'}");

} else {

out.print("{success:false,msg:'登陸失敗，請(qǐng)檢查賬號(hào)和密碼'}");

}

上面代碼用來(lái)處理登陸請(qǐng)求，首先得到提交的賬號(hào)和密碼，如果都是admin時(shí)登陸成功，此時(shí)響應(yīng)一個(gè)JSON對(duì)象“{success:true,msg:'登陸成功，正在轉(zhuǎn)向主頁(yè)面'}”，其它情況登陸失敗，此時(shí)響應(yīng)一個(gè)JSON對(duì)象“{success:false,msg:'登陸失敗，請(qǐng)檢查賬號(hào)和密碼'}”，Ext控件就會(huì)根據(jù)這個(gè)對(duì)象的success屬性的值來(lái)確定是成功或者失敗。

如果賬號(hào)和密碼都輸入admin運(yùn)行結(jié)果如圖3.1.17所示

1.3?Ext樹(shù)控件

在應(yīng)用程序中，經(jīng)常需要顯示或處理樹(shù)狀結(jié)構(gòu)的對(duì)象信息，如部門(mén)信息、地區(qū)信息、菜單信息操作系統(tǒng)中的文件夾信息等。

傳統(tǒng)的 HTML頁(yè)面顯示樹(shù)比較因難，需要編寫(xiě)大量的 JavaScript代碼。而且基于Ajax異步加載的樹(shù)不但涉及Ajax數(shù)據(jù)加載及處理技術(shù)，還需要考慮跨瀏覽器支持等，處理過(guò)程繁瑣。ExtJS中提供了樹(shù)控件，可以在B/S應(yīng)用中快速開(kāi)發(fā)包含樹(shù)結(jié)構(gòu)信息的應(yīng)用。

1.3.1?基本樹(shù)結(jié)構(gòu)

樹(shù)控件由 Ext.tree.TreePanel類定義，TreePanel類繼承自 Panel面板。簡(jiǎn)單的樹(shù)代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

Ext.onReady(function (){

var root = new Ext.tree.TreeNode( {id:'root', text: '根節(jié)點(diǎn)'} ) ;

var child = new Ext.tree.TreeNode( {id:'child', text: '子節(jié)點(diǎn)'} ) ;

root.appendChild(child);

var tree = new Ext.tree.TreePanel({

renderTo: 'myTree',

root: root,

width:200

});

</script>

</head>

<body>

</body>

</html> ????

上述代碼中，使用 new Ext.tree.TreeNode類創(chuàng)建樹(shù)的根節(jié)點(diǎn)和子節(jié)點(diǎn)，然后使用樹(shù)節(jié)點(diǎn) root 的appendChild方法向該節(jié)點(diǎn)中添加一個(gè)子節(jié)點(diǎn)，最后直接使用 new Ext.tree.TreePanel創(chuàng)建樹(shù)面板，在樹(shù)面板的初始化參數(shù)中指定樹(shù)的 root屬性值為前面創(chuàng)建的 root節(jié)點(diǎn)，即樹(shù)根節(jié)點(diǎn)。

1.3.2?Ext樹(shù)控件TreeNode和 TreeLoader

在 Ext JS中，葉子節(jié)點(diǎn)、非葉子節(jié)點(diǎn)統(tǒng)一使用 TreeNode 表示樹(shù)的節(jié)點(diǎn)。樹(shù)節(jié)點(diǎn)包括兩種類型：①普通的簡(jiǎn)單樹(shù)節(jié)點(diǎn)，由Ext.tree.TreeNode定義；②需要異步加載子節(jié)點(diǎn)信息的樹(shù)節(jié)點(diǎn)，由Ext.tree.AsyncTreeNode定義。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

Ext.onReady(function (){

var root = new Ext.tree.TreeNode( {id:'root', text: '根節(jié)點(diǎn)'} ) ;

var child1 = new Ext.tree.TreeNode( {id:'child1', text: '子節(jié)點(diǎn)1'} ) ;

var child2 = new Ext.tree.AsyncTreeNode( {id:'child1', text: '子節(jié)點(diǎn)1'} ) ;

root.appendChild(child1);

root.appendChild(child2);

root.expanded=true;

var tree = new Ext.tree.TreePanel({

renderTo: 'myTree',

root: root,

width:200

});

</script>

</head>

<body>

</body>

</html> ????

上述代碼同時(shí)使用了 TreeNode 和 AsyncTreeNode

上述代碼沒(méi)有指定樹(shù)的加載器，樹(shù)一直嘗試加截子節(jié)點(diǎn) 2。普通的 TreeNode可以通過(guò)調(diào)用節(jié)點(diǎn)的 appendChild、removeChild 等方法向該節(jié)點(diǎn)中添加子節(jié)點(diǎn)或刪除子節(jié)點(diǎn)等。而樹(shù)加載器TreeLoader 是一個(gè)關(guān)鍵的部件，由 Ext.tree.TreeLoader 類定義，只有 AsyncTreeNode 才會(huì)使用 TreeLoader。

使用 TreeLoader需要首先使用 Ext.tree.TreeLoader 初始化一個(gè) TreeLoader 對(duì)象，構(gòu)造函數(shù)中的配置參數(shù) url 表示獲得樹(shù)節(jié)點(diǎn)信息的 url。然后，使用 AsyncTreeNode 初始化根節(jié)點(diǎn)，在該節(jié)點(diǎn)中指定節(jié)點(diǎn)的 loader 為前面定義的 loader。執(zhí)行程序后點(diǎn)擊“根節(jié)點(diǎn)”時(shí)，會(huì)從服務(wù)器踹指定 root 節(jié)點(diǎn)的子節(jié)點(diǎn)信息。

嚴(yán)格地說(shuō)，TreeLoader 是針對(duì)樹(shù)的節(jié)點(diǎn)定義的，可以為樹(shù)中每個(gè)節(jié)點(diǎn)定義不同的 TreeLoader。默認(rèn)情況下，如果一個(gè) AsyncTreeNode 節(jié)點(diǎn)準(zhǔn)備加載子節(jié)點(diǎn)，但節(jié)點(diǎn)上沒(méi)有定義 loader 時(shí)，會(huì)使用 TreePanel 中定義的 loader作為加載器。因此，可以直接在TreePanel上指定 loader屬性，避免為每個(gè)節(jié)點(diǎn)指定具體的 TreeLoader。

實(shí)際上，讀取本地JSON是一種使用 TreeLoader 的另類方法。某些情況下，樹(shù)的數(shù)據(jù)并不多，為了減少數(shù)據(jù)量而使用Ajax訪問(wèn)后臺(tái)并不合適；每個(gè)節(jié)點(diǎn)都使用 New生成又過(guò)于麻煩。此時(shí)，可以使用 TreeLoader 讀取本地JavaScript數(shù)據(jù)生成需要的樹(shù)節(jié)點(diǎn)。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

Ext.onReady(function (){

var tree = new Ext.tree.TreePanel({

renderTo: 'myTree', //應(yīng)用到的HTML元素ID

animate:true,//以動(dòng)畫(huà)形式伸展，收縮子節(jié)點(diǎn)

title: 'EXT靜態(tài)樹(shù)',

collapsible:true,

rootVisible:true,//是否顯示根節(jié)點(diǎn)

autoScroll:true,

autoHeight:true,

width: 250,

lines:true,//節(jié)點(diǎn)之間連接的橫豎線

loader: new Ext.tree.TreeLoader(),

root: new Ext.tree.AsyncTreeNode({

id: 'root',

text:'根節(jié)點(diǎn)',//節(jié)點(diǎn)名稱

expanded:true,//展開(kāi)

leaf:false,//是否為葉子節(jié)點(diǎn)

children:[

{id: 'child1',text: '子節(jié)點(diǎn)一', leaf:true},

{id: 'child2',text: '子節(jié)點(diǎn)二',children: [ {text:'子節(jié)點(diǎn)二的子節(jié)點(diǎn)' } ]} ]

})

});

</script>

</head>

<body>

</body>

</html> ???

上述示例中，TreePanel包括許多參數(shù)設(shè)置，見(jiàn)表 10-1-2。

表 3-1-2 ???TreePanel 的配且參數(shù)

名稱	說(shuō)明
animate	true表示展開(kāi)、收縮動(dòng)畫(huà)，false表示沒(méi)有動(dòng)畫(huà)效果
autoHeight	true表示自動(dòng)高度，默認(rèn)為false
enableDrag	true表示樹(shù)的節(jié)點(diǎn)可以拖動(dòng)Drag
enableDD	可以拖動(dòng)以及通過(guò)Drag改變節(jié)點(diǎn)的層次結(jié)構(gòu)
Lines	節(jié)點(diǎn)間的虛線
Loader	加載節(jié)點(diǎn)數(shù)據(jù)
root	根節(jié)點(diǎn)
rootVisible	false表示不顯示根節(jié)點(diǎn)，默認(rèn)為true
trackMouseOver	false表示mouseover無(wú)效果
useArrows	小箭頭

本章總結(jié)

??Ext中的 MessageBox是一種特殊的窗口，配置簡(jiǎn)單，可以任意拖動(dòng)、擺放，也可以實(shí)現(xiàn)對(duì)任何控件的使用。

??Ext.MessageBox為程序員提供了彈出提示框的簡(jiǎn)單方法，使用它提供的 alert、confirm、prompt等對(duì)話框完全可以替代傳統(tǒng)的同類對(duì)話框。此外，Ext.MessageBox還提供了進(jìn)度條等功能。

??Ext.MessageBox.show（）方法功能非常強(qiáng)大，使用 config 配置形式比前面的方法更方便。

??Ext.form.FormPanel作為表單容器，然后設(shè)置 field。使用 FormPanel 的最大優(yōu)勢(shì)是易于布局，利用items指定 Ext.form.FormPanel 內(nèi)部的子組件。

??Ext提供了許多表單控件，包括 TextField、TextArea、CheckBox、Radio、ComboBox、DateField、HtmlEditor、Hidden 和 TimeField。

??樹(shù)控件由 Ext.tree.TreePanel類定義,樹(shù)中的每個(gè)節(jié)點(diǎn)都是一個(gè)TreeNode對(duì)象。?

任務(wù)實(shí)訓(xùn)部分

1：應(yīng)用Ext消息對(duì)話框

訓(xùn)練技能點(diǎn)

??Ext消息對(duì)話框

需求說(shuō)明

當(dāng)點(diǎn)擊按鈕后，使用Ext. MessageBox. show()方法實(shí)現(xiàn)一個(gè)自定義圖標(biāo)、按鈕的對(duì)話框，效果如圖3.2.1所示。

圖3.2.1 自定義對(duì)話框

實(shí)現(xiàn)步驟

(1)?處理點(diǎn)擊按鈕事件

(2)?使用Ext. MessageBox. show()實(shí)現(xiàn)自定義對(duì)話框

參考代碼

<!DOCTYPE HTML>

<html>

??<head>

??<title>ExtJS</title>

??<meta http-equiv="content-type" content="text/html; charset=UTF-8">

??<link rel="stylesheet" href="extjs/resources/css/ext-all.css" type="text/css"></link>

??<script type="text/javascript" src="extjs/adapter/ext/ext-base-debug.js"></script>

??<script type="text/javascript" src="extjs/ext-all-debug.js"></script>

??<script type="text/javascript">

Ext.onReady(function() {

Ext.get("btn").on("click", function() {

Ext.Msg.show( {

title : '提示',

msg : '請(qǐng)輸入你的住址',

width : 300,

buttons : Ext.MessageBox.OKCANCEL,

multiline : true,

fn : function(btn, text) {

Ext.Msg.alert("結(jié)果", text);

animEl : 'btn',

icon : Ext.MessageBox.QUESTION

});

??</script>

??</head>

??<body>

????<input type="button" id="btn" value="ClickMe">

??</body>

</html>

2：使用Ext實(shí)現(xiàn)注冊(cè)界面

訓(xùn)練技能點(diǎn)

??Ext表單控件

需求說(shuō)明

使用Ext表單控件實(shí)現(xiàn)注冊(cè)頁(yè)面，效果如圖3.2.2所示。

圖3.2.2 注冊(cè)界面

實(shí)現(xiàn)步驟

(1)?使用FormPanel作為界面容器

(2)?在FormPanel容器中添加其它控件

參考代碼

Ext.onReady(function() {

Ext.QuickTips.init();

var form = new Ext.form.FormPanel( {

labelAlign : 'right',

labelWidth : 50,

buttonAlign : 'center',

width : 450,

autoHeight : true,

title : 'form',

frame : true,

defaults : {

width : 300

defaultType : 'textfield',

items : [ {

fieldLabel : '賬號(hào)',

name : 'name'

}, {

fieldLabel : '密碼',

inputType : 'password',

name : 'password'

}, {

xtype : 'numberfield',

fieldLabel : '年齡',

name : 'age'

}, {

xtype : "combo",

fieldLabel : '性別',

hiddenName:'sex',

store : new Ext.data.SimpleStore( {

fields : [ 'value', 'text' ],

data : [ [ 'M', '男' ], [ 'F', '女' ] ]

}),

displayField : 'text',

valueField : 'value',

mode : 'local',

emptyText : '請(qǐng)選擇'

}, {

xtype : 'datefield',

fieldLabel : '生日',

format:'Y-m-d',

name : 'birthday'

}, {

xtype : 'textarea',

fieldLabel : '簡(jiǎn)介',

name : 'controduce'

} ],

buttons : [ {

text : '注冊(cè)',

listeners:{

click:function(){

form.getForm().submit({

});

}

}, {

text : '取消'

} ]

});

form.render("form");

});

3：使用Ext實(shí)現(xiàn)注冊(cè)功能

訓(xùn)練技能點(diǎn)

??Ext表單控件

需求說(shuō)明

在任務(wù)2的基礎(chǔ)上完成注冊(cè)功能，當(dāng)用戶點(diǎn)擊【注冊(cè)】按鈕后，提交到后臺(tái)程序并保存到數(shù)據(jù)庫(kù)，保存成功或失敗給出提示，效果如圖3.2.3所示。

圖3.2.3 注冊(cè)功能

實(shí)現(xiàn)步驟

(1)?使用FormPanel的url屬性指定提交路徑。

(2)?處理【注冊(cè)】按鈕點(diǎn)擊事件，當(dāng)點(diǎn)擊后提交請(qǐng)求到后臺(tái)處理程序完成注冊(cè)。

參考代碼

核心代碼如下所示。

buttons : [ {

text : '注冊(cè)',

listeners:{

click:function(){

form.getForm().submit({

success:function(f,a){

Ext.Msg.alert("提示",a.result.msg);

failure:function(f,a){

Ext.Msg.alert("提示",a.result.msg);

}

});

}

}, {

text : '取消'

} ]

4：使用Ext實(shí)現(xiàn)樹(shù)結(jié)構(gòu)

訓(xùn)練技能點(diǎn)

??Ext樹(shù)控件

需求說(shuō)明

實(shí)現(xiàn)一個(gè)管理系統(tǒng)的樹(shù)結(jié)構(gòu)，效果如圖3.2.4所示。

圖3.2.4 管理系統(tǒng)樹(shù)結(jié)構(gòu)

實(shí)現(xiàn)步驟

(1)?使用TreePanel作為容器。

(2)?向容器中添加樹(shù)節(jié)點(diǎn)。

參考代碼

核心代碼如下所示。

Ext.onReady(function() {

var tree = new Ext.tree.TreePanel( {

collapsible : true,

title : '管理菜單',

width : 200,

autoScroll : true,

split : true,

loader : new Ext.tree.TreeLoader(),

root : new Ext.tree.AsyncTreeNode( {

text : '系統(tǒng)管理',

expanded : true,

icon : 'img/13.png',

children : [ {

text : '用戶管理',

icon : 'img/users.png',

children : [ {

text : '用戶角色',

icon : 'img/user.png',

leaf : true

}, {

text : '用戶權(quán)限',

icon : 'img/usericon.png',

leaf : true

} ]

}, {

text : '客戶管理',

icon : 'img/60.png',

children : [ {

text : '客戶維護(hù)',

icon : 'img/61.png',

leaf : true

}, {

text : '客戶關(guān)系',

icon : 'img/62.png',

leaf : true

} ]

},{

text : '系統(tǒng)設(shè)置',

icon : 'img/90.png',

children : [ {

text : '字典設(shè)置',

icon : 'img/91.png',

leaf : true

}, {

text : '數(shù)據(jù)清除',

icon : 'img/92.png',

leaf : true

} ]

}]

})

});

tree.render("tree");

tree.expandAll();

});

鞏固練習(xí)部分

一、選擇題

???1、?進(jìn)度條一般不直接關(guān)閉，通常情況下可以使用（）隱藏對(duì)話框的關(guān)閉按鈕。

????A. closable：false

????B. closable：true

????C. progress：false

????D. progress：true

2. “Ext.MessageBox.confirm（"title"，"msg"，function（e）{alert（e）；}）；”中 function 的參數(shù)e是（ ??）

????A. 點(diǎn)擊的彈出框的按鈕的值

????B. 點(diǎn)擊的彈出框的標(biāo)題的值

????C. 點(diǎn)擊的彈出框的內(nèi)容的值

????D. 點(diǎn)擊的彈出框的關(guān)閉按鈕的值

3. 使用 Ext 的（ ??），可以替代傳統(tǒng)的 alert、confirm等方法產(chǎn)生的對(duì)話框。

????A. Ext. MessageBox

????B. Ext. form

????C. Ext. tree

????D. Ext. Gird

4. Ext 中提供制作進(jìn)度條的是（ ??）

????A. Ext.MessageBox. alert（）

????B. Ext.MessageBox. con finn（）

????C. Ext.MessageBox. prompt（）

????D. Ext.MessageBox.show（）

5. 在默認(rèn)情況下，表單驗(yàn)證的輸入控件會(huì)監(jiān)聽(tīng)blur事件，如果數(shù)據(jù)驗(yàn)證失敗，則根據(jù)msgTarget的設(shè)置顯示錯(cuò)誤消息。通常，msgTarget可以被設(shè)置為（ ??）

????A. qtip

????B. title

????C. side

????D. under

二、簡(jiǎn)答題

Ext.form.Field定義的輸入控件包含哪些通用的屬性和功能函數(shù)？

三、操作題

使用 Ext JS表單控件制作論壇中用戶的注冊(cè)頁(yè)面，在用戶提交注冊(cè)信息時(shí)使用進(jìn)度條。

總結(jié)

以上是生活随笔為你收集整理的Ext常用组件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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

上一篇： Oracle代码大全.从入门到熟练
下一篇： Ext布局