ExtJS夢想之旅(三)–綜合練習(Ext視窗的使用和事件驅動編程)

來源:互聯網
上載者:User

        通過前面對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事件驅動編程的一個總結。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

Tags Index: