通過前面對ExtJS的初步學習，現在來綜合起來做一個總結。
使用ExtJS完成需求：當頁面載入時建立一個Ext視窗，該視窗上有兩個按鈕，當單擊按鈕一的時候彈出一個普通視窗，當單擊
按鈕二的時候彈出一個視窗，該視窗中顯示一棵樹。
最後的完成：
實現：
ext-test1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Ext測試一：顯示視窗</title><!-- 第一步：引如Ext的樣式檔案 --><link href="ext-3.4.1/resources/css/ext-all.css" rel="stylesheet" type="text/css"><!-- 第二步：引入Ext適配器驅動 --><script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script><!-- 第三步：引入Ext庫檔案 --><script type="text/javascript" src="ext-3.4.1/ext-all.js"></script><!-- 第四步：引入自己編寫的實現功能 --><script type="text/javascript" src="ext-test1.js"></script></head><body></body></html>
ext-test1.js
/* * 注意這裡調用函數式不能加括弧的， 因為如果加了括弧的話，函數就會馬上執行了將執行的結果返回給onReady， 因此就會執行undefined的 */Ext.onReady(showWindow2);function showWindow2() {// 建立一個視窗var win = new Ext.Window({// 視窗標題title : "Ext",// 視窗寬度width : 300,// 視窗高度height : 300,// 添加兩個按鈕buttons : [ {// 按鈕上的文本text : "單擊我",// 處理按鈕的單擊事件handler : function() {// 當單擊按鈕時建立一個視窗new Ext.Window({title : "普通視窗",width : 100,height : 100,// 視窗中的內容html : "<font color='red'><b>我是普通視窗</b></font>"}).show();}}, {// 這裡是第二個按鈕text : "單擊我建立樹",handler : function() {var win = new Ext.Window({title : "樹視窗",width : 250,height : 250,html : tree});// 將樹添加到視窗中win.add(tree);// 顯示視窗win.show();}} ]}).show();// 建立一棵樹var tree = new Ext.tree.TreePanel({// 樹寬度width : 200,// 樹的高度height : 200,// 樹的根節點root : new Ext.tree.AsyncTreeNode({text : "聖誕樹",// 樹的子節點一children : [ {text : "葉子節點一",// 樹的孫節點children : [ {text : "孫節點一",// leaf配置選項表示是否作為葉子節點顯示；true表示是葉子節點，false表示不是葉子節點leaf : true} ]}, {// 樹的葉子節點二text : "頁子節點二",leaf : true} ]})});}
上面的例子是對視窗的使用和Ext事件驅動編程的一個總結。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
