Ext常用组件
視頻課：https://edu.csdn.net/course/play/7621
表單是客戶端和服務器交互的一種重要方式，Ext表單控件在界面體驗效果的美觀度及功能的全面性上都有著首屈一指的影響力，表面上，表單控件只是添加了一些 CSS樣式，但它在數據校驗方面非常靈活。
實際上，Ext提供的功能遠不止這些，它還可以使不同的消息對話框更加美觀、容易配置、拖動等，這都是傳統的頁面方式無法比擬的。
此外，Ext的樹形結構是Ext框架的重要組成部分，可以動態添加、刪除或修改節點，實現拖拽和右鍵菜單等功能，而且其界面和動畫十分美觀。本章將分別從Ext的消息對話框、表單控件以及Ext樹形結構開始，詳細講解Ext常用控件。?
?
核心技能部分
1.1?Ext消息對話框
傳統方法 （alert、confirm等）產生的對話框非常呆板，對界面的體驗效果產生了負面影響。ExtJS 提供了一套非常漂亮的對話框，可以實現華麗的應用程序界面。
1.1.1?Ext.MessageBox介紹
Ext中的 MessageBox是一種特殊的窗口，配置簡單，可以任意拖動、擺放，也可以實現對任何控件的使用。Ext.MessageBox 是一個用于產生不同風格提示框的實體類，它的另一種寫法是 Ext.Msg。與傳統瀏覽器的 alert 提示不同，Ext.MessageBox是異步的，在顯示一個 Ext.MessageBox時并不會停止代碼的運行。因此，代碼需要獲得用戶反饋后再運行時，必須使用回調函數。Ext.MessageBox為程序員提供了彈出提示框的簡單方法，使用它提供的 alert、confirm、prompt等對話框完全可以替代傳統的同類對話框。此外，Ext.MessageBox還提供了進度條等功能。
1.1.2?Ext. MessageBox. alert()
Ext.MessageBox.alert（）一般包含 title、msg 和 function 這 3 個參數。其中，title 指窗口的標題，msg 指窗口的內容，function 指點擊關閉按鈕后執行的函數。
?
Alert(title，msg，function(){} ) |
?
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
?
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css"/>
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
?
</head>
?
<body>
?
<h1>消息對話框</h1>
<p>=======================</p>
<p>確認對話框</p>
<p><button id="messageBox1">Click Me</button></p>
<script language="javascript">
Ext.onReady(function(){
Ext.get('messageBox1').on('click',function(){
Ext.MessageBox.alert('狀態','保存成功');
});
});
</script>
</body>
</html>
示例 3.1 實現了一個簡單的 alert對話框
?
1.1.3?Ext. MessageBox. confirm()
Ext.MessageBox.confirm（）方法基本上與 alert（）方法相同調用該方法后，程序將生成ok和cancel兩個值。
?
Ext.MessageBox.confirm(String title,String msg,Function fn); |
Ext.MessageBox.confirm中有值yes和no。一個是/否的對話框代碼如下：
?
<body>
?
<h1>消息對話框</h1>
<p>=======================</p>
<p>"Yes/No"對話框</p>
<p><button id="messageBox1">Click Me</button></p>
<script language="javascript">
Ext.onReady(function(){
Ext.get('messageBox1').on('click',function(){
Ext.MessageBox.confirm('確認','您確定要執行此操作嗎？');
});
});
</script>
</body>
示例3.2實現了一個是/ 否的對話框
提示：如果按鈕的文字要顯示中文，可以引入下面一個文件：
<script type="text/javascript" src="ext-3.0.0/src/locale/ext-lang-zh_CN.js"></script>
1.1.4?Ext. MessageBox. prompt()
Ext.MessageBox.prompt（）方法用于產生輸入框，相當于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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css"/>
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<script type="text/javascript" src="ext-3.0.0/src/locale/ext-lang-zh_CN.js"></script>
</head>
?
<body>
<center>
<h1>消息對話框</h1>
????<p>------------------------</p>
????<p>交互對話框</p>
????<p><button id="messageBox1">click me</button></p>
</center>
</body>
?
<script type="text/javascript">
?
Ext.onReady(function(){
Ext.get('messageBox1').on('click',function(){
Ext.MessageBox.prompt('金額','請輸入充值金額:'); });
});
?
</script>
</html>
示例 3.3 實現了一個可輸入充值卡金額的對話框
修改示例 3.3，處理用戶點擊 “ok”與 “cancel” 的不同點擊事件
<script language="javascript">
Ext.onReady(function(){
Ext.get('messageBox1').on('click',function(){
Ext.MessageBox.prompt('金額','請輸入充值金額：',function(bt,text){
if(bt == 'ok'){
Ext.MessageBox.alert('狀態','您輸入的充值金額：' + text);
}else{
Ext.MessageBox.alert('狀態','您取消了充值!');
} ???
???});
});
});
</script>
?
1.1.5?Ext. MessageBox. show()
Ext.MessageBox.show（）方法功能非常強大，使用 config 配置形式比前面的方法更方便。該方法的參數很多，最常用的配置參數見表 3-1-1。
表 3-1-1 ???Ext.MessageBox.show() 參數
參數 | 說明 |
animal | 對話框彈出和關閉時動畫效果，設置為“idName”則從idName處彈出并產生動畫，收起動畫則相反。 |
buttons | 彈出框按鈕的設置，主要包括：Ext.Msg.OK、Ext.Msg.OKCANCEL、Ext.Msg.CANCEL、Ext.Msg.YESNO、Ext.Msg.YESNOCANCEL |
closable | 默認為true，如果為false，則不顯示右上角的關閉按鈕 |
msg | 消息的內容 |
title | 標題 |
fn | 關閉彈出框后執行的函數 |
icon | 彈出框內容前面的圖標，取值為：Ext.MessageBox.INFO、Ext.MessageBox.ERROR、Ext.MessageBox.WARNING、Ext.MessageBox.QUESTION |
width | 彈出框的寬度，不帶單位 |
prompt | 設為true，則彈出框帶有輸入框 |
multiline | 設為true，則彈出框帶有多行輸入框 |
progress | 設為true，顯示進度條 |
progressText | 在進度條上顯示的文本 |
wait | 設為true，動態顯示 progress |
waiting | 配置參數，以控制 progress 的顯示 |
?
使用 Ext.MessageBox.show（）制作帶 Yes/No/Cancel 的對話框. 代碼如下：
<script type="text/javascript">
Ext.onReady(function(){
Ext.get('messageBox1').on('click',function(e){
Ext.MessageBox.show({
title:'保存?',
msg:'您正在關閉一個沒有保存的表單,您要保存嗎?',
buttons:Ext.MessageBox.YESNOCANCEL,
animEl:'messageBox1'
});
});
});
</script>
在實際應用中，執行十分耗時的操作時，需要使用進度條提示用戶耐心等候。在Ext 中，可以使用 Ext.MessageBox.show（）制作簡單的進度條。Ext.MessageBox.show（）中提供了一個默認的進度條，此進度條在progress被設置為 true后出現在對話框中，代碼如下：
Ext.MessageBox.show({
title:'請稍等...',
msg:'處理中...',
width:300,
progress:true,
closable:false,
animEl:'messageBox1'
});
由圖3.1.7?可知，進度條的狀態不能輕易向前推進，可以使用 Ext.MessageBox.updateProgress（）函數改善進度條狀態。一般情況下，進度條可以不直接關閉，而是使用 closable：false 隱藏對話框的關閉按鈕。
為了使進度條變化更加形象，使用timeout定時器對進度條進行修改，使進度條的狀態隨時間變化，為用戶顯示進度的百分比。
<script language="javascript">
Ext.onReady(function(){
Ext.get('messageBox1').on('click',function(){
Ext.MessageBox.show({
title:'請稍等...',
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,'內容加載中，進度'+ v + ' %...');}
}
}
for(var i=1; i<101; i++){
setTimeout(fv(i),i*100);
}
});
});
</script>
1.2?Ext表單控件
表面上，Ext表單控件只是修改了 CSS 樣式，但在漂亮的界面下隱藏的仍然是input控件。表單除了前面的功能外還需要數據校驗、數據校驗失敗的提示等，這些功能在傳統的表單控件中沒有良好的處理方式。在Ext 中，可以通過表單和對應的輸入控件，輕易地校驗數據，并在校驗失敗后給予提示，為用戶提供良好的交互體驗。
1.2.1?Ext表單
使用表單控件，制作簡單的Ext表單。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css"/>
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
?
<body>
<div id="myForm"></div>
<script type="text/javascript">
?
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>
上述代碼創建的 Ext表單中，包含一個單行輸入框和兩個按鈕 （提交、重置）
制作一個 Ext.form.FormPanel，然后設置 field。FormPanel 是 Ext.Panel 的子類，可以對其執行各種 Panel 的操作。使用 FormPanel 的最大優勢是易于布局，Ext.form.FormPanel繼承了 Ext.Panel。 Panel 可以將 Ext.form.FormPanel 放入 Ext.Viewport 中作為整個頁面布局的一部分，同時利用items指定 Ext.form.FormPanel 內部的子組件。
1.2.2?Ext表單控件
Ext提供了許多表單控件，包括 TextField、TextArea、CheckBox、Radio、ComboBox、DateField、HtmlEditor、Hidden 和 TimeField。
1. 基本輸入控件 Ext.form.Field
Ext.form.Field是所有表單輸入控件的基類，其他輸入控件都由它擴展而來。該控件定義了輸入控件的通用屬性和功能函數，這些屬性和功能函數大致分為 3 類：頁面顯示樣式、控件參數配置和數據有效性校驗。
（1）頁面顯示樣式：clearCls、cls、fieldClass、focusClass、itemCls、invalidClass、labelStyle等屬性，分別用于定義不同狀態下輸入框采用的樣式。
（2）控件參數配置：autoCreate、disabled、fieldLabel、hideLabel、inputType、labelSeparator、name、readOnly、tablndex、value等屬性。
（3）數據有效性檢驗：invalidText、msgFx、msgTarget、validateOnBlue、validateDelay、validateEvent等屬性。
以下將通過數據驗證說明 Field。在默認的情況下，表單驗證的輸入控件會監聽blur事件，數據驗證失敗則會根據 msgTarget的設置顯示錯誤消息。通常，msgTarget可以被設置為 qtip、title、side或 under，根據不同的設置，錯誤信息將以指定的方式顯示。所有的輸入控件都繼承 Ext.form. Field，所以任何表單輸入控件都可以改變其錯誤消息的顯示方式。用戶登錄的驗證代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css"/>
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<div id="form"></div>
<script language="javascript">
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（）函數顯示 field 的錯誤信息樣式。其中，msgTarget分別設置為 qtip 和title。運行程序
2. 文本輸入控件 Ext.form.TextField
Ext.form.TextField繼承 自 Ext.form.Field，是專用于輸人文本的輸入控件。除了 Field 的功能外，此控件最主要的特性是檢查輸入框數據是否為空以及數據的最大、最小長度。添加 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: '請輸入備注信息',
?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: '請輸入出生日期',
?format: 'Y-m-d',
?disabledDays:[0,6]
});
?
5. 時間輸入控件 Ext.form.TimeField
使用日期控件后，有時應用程序還需要精確到日期的具體時間。Ext.form.TimeField是用于選擇時間的輸入控件，它可以通過指定一天的開始時間、結束時間以及時間間隔選擇時間。
var field6 = new Ext.form.TimeField({
fieldLabel: '時間',
emptyText: '請選擇',
minValue: '1:00 AM',
maxValue: '23:00 PM',
increment:60
});
6. 在線編輯器控件 Ext.form.HtmlEditor
HTML 中包含許多在線編輯器，但其使用較復雜。Ext提供了簡單的在線編輯器控件 Ext.form.HtmlEditor，可以對文本進行各項設置。
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%'
}); ??
由以上代碼可知，可以通過相應的enable選項啟用或禁用來設置各種功能
7. 隱藏域控件 Ext.form.Hidden
在實際應用中，修改記錄信息時，信息 ID 一般不顯示給用戶，但該 ID 需要在頁面使用時，一般必須隱藏 ID 值。在Ext 中，可以使用隱藏域控件 Ext.form.Hidden 來隱藏不需要呈現給用戶的信息，該控件直接繼承自 Ext.form.Field，通過Hidden的 setValue（）和 getValue（）函數賦值和取值，且值不顯示在頁面上。
var field8 = new Ext.form.Hidden({
fieldLabel: 'empId'
});
field8.setValue('0003');
var empId = field8.getValue(); ??
運行上述代碼，頁面中將產生隱藏域 empId=0003。
1.2.3?表單提交
表單最重要的功能就是向后臺提交數據，下面通過一個注冊功能演示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 : '賬號',
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");
});
?
上面代碼中，為了提交數據，要為form設置一個url參數，表示表單數據提交到該路徑。記得要給TextField加上一個name屬性，這樣后臺程序才可以通過這個屬性值獲取提交的值。最后看Ext的按鈕，在【提交】按鈕上，使用listeners配置項處理事件，值是一個JSON對象，該JSON對象的屬性是事件名稱，值是事件處理函數。在本例中當點擊按鈕后，獲取FormPanel包含的BasicForm對象，然后再調用submit()函數即可完成提交。
在本例中的提交到的后臺程序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:'登陸成功，正在轉向主頁面'}");
} else {
out.print("{success:false,msg:'登陸失敗，請檢查賬號和密碼'}");
}
%>
上面代碼用來處理登陸請求，首先得到提交的賬號和密碼，如果都是admin時登陸成功，此時響應一個JSON對象“{success:true,msg:'登陸成功，正在轉向主頁面'}”，其它情況登陸失敗，此時響應一個JSON對象“{success:false,msg:'登陸失敗，請檢查賬號和密碼'}”，Ext控件就會根據這個對象的success屬性的值來確定是成功或者失敗。
如果賬號和密碼都輸入admin運行結果如圖3.1.17所示
1.3?Ext樹控件
在應用程序中，經常需要顯示或處理樹狀結構的對象信息，如部門信息、地區信息、菜單信息操作系統中的文件夾信息等。
傳統的 HTML頁面顯示樹比較因難，需要編寫大量的 JavaScript代碼。而且基于Ajax異步加載的樹不但涉及Ajax數據加載及處理技術，還需要考慮跨瀏覽器支持等，處理過程繁瑣。ExtJS中提供了樹控件，可以在B/S應用中快速開發包含樹結構信息的應用。
1.3.1?基本樹結構
樹控件由 Ext.tree.TreePanel類定義，TreePanel類繼承自 Panel面板。簡單的樹代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css"/>
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<script language="javascript">
Ext.onReady(function (){
var root = new Ext.tree.TreeNode( {id:'root', text: '根節點'} ) ;
var child = new Ext.tree.TreeNode( {id:'child', text: '子節點'} ) ;
root.appendChild(child);
var tree = new Ext.tree.TreePanel({
renderTo: 'myTree',
root: root,
width:200
});
});
</script>
</head>
<body>
<div id="myTree" style="height:300px"></div>
</body>
</html> ????
上述代碼中，使用 new Ext.tree.TreeNode類創建樹的根節點和子節點，然后使用樹節點 root 的appendChild方法向該節點中添加一個子節點，最后直接使用 new Ext.tree.TreePanel創建樹面板，在樹面板的初始化參數中指定樹的 root屬性值為前面創建的 root節點，即樹根節點。
1.3.2?Ext樹控件TreeNode和 TreeLoader
在 Ext JS中，葉子節點、非葉子節點統一使用 TreeNode 表示樹的節點。樹節點包括兩種類型：①普通的簡單樹節點，由Ext.tree.TreeNode定義；②需要異步加載子節點信息的樹節點，由Ext.tree.AsyncTreeNode定義。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css"/>
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<script language="javascript">
Ext.onReady(function (){
var root = new Ext.tree.TreeNode( {id:'root', text: '根節點'} ) ;
var child1 = new Ext.tree.TreeNode( {id:'child1', text: '子節點1'} ) ;
var child2 = new Ext.tree.AsyncTreeNode( {id:'child1', text: '子節點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>
<div id="myTree" style="height:300px"></div>
</body>
</html> ????
上述代碼同時使用了 TreeNode 和 AsyncTreeNode
上述代碼沒有指定樹的加載器，樹一直嘗試加截子節點 2。普通的 TreeNode可以通過調用節點的 appendChild、removeChild 等方法向該節點中添加子節點或刪除子節點等。而樹加載器TreeLoader 是一個關鍵的部件，由 Ext.tree.TreeLoader 類定義，只有 AsyncTreeNode 才會使用 TreeLoader。
使用 TreeLoader需要首先使用 Ext.tree.TreeLoader 初始化一個 TreeLoader 對象，構造函數中的配置參數 url 表示獲得樹節點信息的 url。然后，使用 AsyncTreeNode 初始化根節點，在該節點中指定節點的 loader 為前面定義的 loader。執行程序后點擊“根節點”時，會從服務器踹指定 root 節點的子節點信息。
嚴格地說，TreeLoader 是針對樹的節點定義的，可以為樹中每個節點定義不同的 TreeLoader。默認情況下，如果一個 AsyncTreeNode 節點準備加載子節點，但節點上沒有定義 loader 時，會使用 TreePanel 中定義的 loader作為加載器。因此，可以直接在TreePanel上指定 loader屬性，避免為每個節點指定具體的 TreeLoader。
實際上，讀取本地JSON是一種使用 TreeLoader 的另類方法。某些情況下，樹的數據并不多，為了減少數據量而使用Ajax訪問后臺并不合適；每個節點都使用 New生成又過于麻煩。此時，可以使用 TreeLoader 讀取本地JavaScript數據生成需要的樹節點。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css"/>
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<script language="javascript">
Ext.onReady(function (){
var tree = new Ext.tree.TreePanel({
renderTo: 'myTree', //應用到的HTML元素ID
animate:true,//以動畫形式伸展，收縮子節點
title: 'EXT靜態樹',
collapsible:true,
rootVisible:true,//是否顯示根節點
autoScroll:true,
autoHeight:true,
width: 250,
lines:true,//節點之間連接的橫豎線
loader: new Ext.tree.TreeLoader(),
root: new Ext.tree.AsyncTreeNode({
id: 'root',
text:'根節點',//節點名稱
expanded:true,//展開
leaf:false,//是否為葉子節點
children:[
{id: 'child1',text: '子節點一', leaf:true},
{id: 'child2',text: '子節點二',children: [ {text:'子節點二的子節點' } ]} ]
})
});
});
</script>
</head>
<body>
<div id="myTree" style="height:300px"></div>
</body>
</html> ???
上述示例中，TreePanel包括許多參數設置，見表 10-1-2。
?
表 3-1-2 ???TreePanel 的配且參數
名稱 | 說明 |
animate | true表示展開、收縮動畫，false表示沒有動畫效果 |
autoHeight | true表示自動高度，默認為false |
enableDrag | true表示樹的節點可以拖動Drag |
enableDD | 可以拖動以及通過Drag改變節點的層次結構 |
Lines | 節點間的虛線 |
Loader | 加載節點數據 |
root | 根節點 |
rootVisible | false表示不顯示根節點，默認為true |
trackMouseOver | false表示mouseover無效果 |
useArrows | 小箭頭 |
??
本章總結
??Ext中的 MessageBox是一種特殊的窗口，配置簡單，可以任意拖動、擺放，也可以實現對任何控件的使用。
??Ext.MessageBox為程序員提供了彈出提示框的簡單方法，使用它提供的 alert、confirm、prompt等對話框完全可以替代傳統的同類對話框。此外，Ext.MessageBox還提供了進度條等功能。
??Ext.MessageBox.show（）方法功能非常強大，使用 config 配置形式比前面的方法更方便。
??Ext.form.FormPanel作為表單容器，然后設置 field。使用 FormPanel 的最大優勢是易于布局，利用items指定 Ext.form.FormPanel 內部的子組件。
??Ext提供了許多表單控件，包括 TextField、TextArea、CheckBox、Radio、ComboBox、DateField、HtmlEditor、Hidden 和 TimeField。
??樹控件由 Ext.tree.TreePanel類定義,樹中的每個節點都是一個TreeNode對象。?
任務實訓部分
1：應用Ext消息對話框
訓練技能點
??Ext消息對話框
需求說明
當點擊按鈕后，使用Ext. MessageBox. show()方法實現一個自定義圖標、按鈕的對話框，效果如圖3.2.1所示。
?
圖3.2.1 自定義對話框
實現步驟
(1)?處理點擊按鈕事件
(2)?使用Ext. MessageBox. show()實現自定義對話框
參考代碼
<!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 : '請輸入你的住址',
width : 300,
buttons : Ext.MessageBox.OKCANCEL,
multiline : true,
fn : function(btn, text) {
Ext.Msg.alert("結果", text);
},
animEl : 'btn',
icon : Ext.MessageBox.QUESTION
});
});
});
??</script>
??</head>
??<body>
????<input type="button" id="btn" value="ClickMe">
??</body>
</html>
?
2：使用Ext實現注冊界面
訓練技能點
??Ext表單控件
需求說明
使用Ext表單控件實現注冊頁面，效果如圖3.2.2所示。
?
圖3.2.2 注冊界面
實現步驟
(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 : '賬號',
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 : '請選擇'
}, {
xtype : 'datefield',
fieldLabel : '生日',
format:'Y-m-d',
name : 'birthday'
}, {
xtype : 'textarea',
fieldLabel : '簡介',
name : 'controduce'
} ],
buttons : [ {
text : '注冊',
listeners:{
click:function(){
form.getForm().submit({
});
}
}
}, {
text : '取消'
} ]
});
form.render("form");
});
3：使用Ext實現注冊功能
訓練技能點
??Ext表單控件
需求說明
在任務2的基礎上完成注冊功能，當用戶點擊【注冊】按鈕后，提交到后臺程序并保存到數據庫，保存成功或失敗給出提示，效果如圖3.2.3所示。
?
圖3.2.3 注冊功能
實現步驟
(1)?使用FormPanel的url屬性指定提交路徑。
(2)?處理【注冊】按鈕點擊事件，當點擊后提交請求到后臺處理程序完成注冊。
參考代碼
核心代碼如下所示。
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 : '取消'
} ]
?
4：使用Ext實現樹結構
訓練技能點
??Ext樹控件
需求說明
實現一個管理系統的樹結構，效果如圖3.2.4所示。
?
圖3.2.4 管理系統樹結構
實現步驟
(1)?使用TreePanel作為容器。
(2)?向容器中添加樹節點。
參考代碼
核心代碼如下所示。
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 : '系統管理',
expanded : true,
icon : 'img/13.png',
children : [ {
text : '用戶管理',
icon : 'img/users.png',
children : [ {
text : '用戶角色',
icon : 'img/user.png',
leaf : true
}, {
text : '用戶權限',
icon : 'img/usericon.png',
leaf : true
} ]
}, {
text : '客戶管理',
icon : 'img/60.png',
children : [ {
text : '客戶維護',
icon : 'img/61.png',
leaf : true
}, {
text : '客戶關系',
icon : 'img/62.png',
leaf : true
} ]
},{
text : '系統設置',
icon : 'img/90.png',
children : [ {
text : '字典設置',
icon : 'img/91.png',
leaf : true
}, {
text : '數據清除',
icon : 'img/92.png',
leaf : true
} ]
}]
})
?
});
tree.render("tree");
tree.expandAll();
});
?
?
鞏固練習部分
一、選擇題
???1、?進度條一般不直接關閉，通常情況下可以使用 （ ）隱藏對話框的關閉按鈕。
????A. closable：false
????B. closable：true
????C. progress：false
????D. progress：true
2. “Ext.MessageBox.confirm（"title"，"msg"，function（e）{alert（e）；}）；”中 function 的參數e是 （ ??）
????A. 點擊的彈出框的按鈕的值
????B. 點擊的彈出框的標題的值
????C. 點擊的彈出框的內容的值
????D. 點擊的彈出框的關閉按鈕的值
3. 使用 Ext 的 （ ??），可以替代傳統的 alert、confirm等方法產生的對話框。
????A. Ext. MessageBox
????B. Ext. form
????C. Ext. tree
????D. Ext. Gird
4. Ext 中提供制作進度條的是 （ ??）
????A. Ext.MessageBox. alert（）
????B. Ext.MessageBox. con finn（）
????C. Ext.MessageBox. prompt（）
????D. Ext.MessageBox.show（）
5. 在默認情況下，表單驗證的輸入控件會監聽blur事件，如果數據驗證失敗，則根據msgTarget的設置顯示錯誤消息。通常，msgTarget可以被設置為 （ ??）
????A. qtip
????B. title
????C. side
????D. under
二、簡答題
Ext.form.Field定義的輸入控件包含哪些通用的屬性和功能函數？
三、操作題
使用 Ext JS表單控件制作論壇中用戶的注冊頁面，在用戶提交注冊信息時使用進度條。
總結
- 上一篇： Oracle代码大全.从入门到熟练
- 下一篇： Ext布局