程式扎記: [ ExtJS3.x 開發實戰 ] CH7 : 彈出視窗 - Ext.Window 常用屬性

標籤

2013年2月23日 星期六

[ ExtJS3.x 開發實戰 ] CH7 : 彈出視窗 - Ext.Window 常用屬性

Preface: 
從外表來看, Window 和 MessageBox 外在長相與功能很像似, 這是因為 Ext.MessageBox 內部也是基於 Ext.Window 實現的. 

建立一個視窗: 
先看看一個簡單範例: 
  1. Ext.onReady(function(){    
  2.     Ext.BLANK_IMAGE_URL = '../js/ext-3.4.0/resources/images/default/s.gif';    
  3.       
  4.     var win = new Ext.Window({  
  5.         el: 'window-win',  
  6.         layout: 'fit',  
  7.         title: 'Title',  
  8.         closable: true,  
  9.         closeAction: 'hide',  
  10.         width: 600,  
  11.         height: 350,  
  12.         items: [{}],  
  13.         buttons: [{  
  14.             text: 'Button',  
  15.         }]  
  16.     });  
  17.       
  18.     win.show();  
  19. });  
上面的 Window 需要一個對應的 HTML 元素, 我們用 el 屬性指定 'window-win' ; 透過 width 與 height 設定寬度與高度. 其次需要設定的是視窗的布局類型, layout:'fit' 表示佈局會充滿整個視窗. 當視窗大小改變, 內部元件也會隨之調整. 而 items 參數指定視窗中放置的子元件, 如表格, 數或表單等. 

closeAction: 'hide' 是一個常用參數, 它控制用戶按一下右上角關閉圖示後執行的操作. 參數值 'hide' 表示關閉後執行隱藏命令, 之後我們可以使用 show() 函數顯示剛剛關閉的視窗 ; 'close' 會在關閉視窗時把視窗物件銷毀, 這樣就不能使用 show() 函數顯示剛剛的視窗. 如果不想讓使用者使用右上角關閉按鈕, 可以設定 closable: false ; 如果不想讓使用者拖拉視窗位置, 可以設定 draggable: true. 

buttons 參數用於設定視窗底部的按鈕. 這裡我們建立一個按鈕但沒有給定事件應處理函式. 執行結果如下: 
 

Ext.Window 直接繼承自 Ext.Panel, 因此我們可以使用 Ext.Panel 中定義的參數對視窗進行設定標題, 上方和下方的工具列, 內容以及折疊展開等功能. 

視窗最大化與最小化: 
透過參數 maximizable: true 可以使用視窗右上角最大化的按鈕; 透過使用參數 minimizable: true 可以使用視窗右上角最小化的按鈕: 
 

按下最大化按鈕後, 視窗會填滿整個瀏覽器視窗; 按下最小化按鈕並不會觸發任何操作, 我們需要根據實際情況來自定最小化功能. 有兩種實現方法: 監聽 minimize 事件與改寫 minimize() 函數. 

視窗的隱藏與銷毀: 
Ext.Window 中包含一個 closeAction 參數. 這個參數用來設定關閉視窗時執行動作. 預設值為 closeAction: 'close' , 指關閉視窗後 Ext 會將視窗物件與其對應的 DOM 模型完全銷毀, 而已經銷毀的視窗無法透過呼叫 show() 顯示出來; 另一個設定是 closeAction: 'hide', 在關閉視窗後仍可透過函數 show() 顯示關閉視窗. 於視窗關閉相關配置還有 closeable 參數, 預設為 true. 指視窗右上角會出現關閉按鈕, 如果設定為 false, 就會隱藏關閉按鈕. 

防止視窗超出瀏覽器: 
預設配置下, 視窗可以移到任何位置, 甚至可能超出瀏覽器的邊界, 有時候會出現一些問題. 為了避免這個問題, 我們可以限制視窗移動範圍, 讓它維持在瀏覽器的可視範圍內. 這時可以選擇使用參數constrain 和 constrainHeader, 它們分別用來限制視窗的整體與視窗的頂部不能超出瀏覽器的邊界. 

設定視窗中的按鈕: 
可以透過 buttons 參數設定視窗下的按鈕, 範例代碼如下: 
  1. Ext.onReady(function(){    
  2.     Ext.BLANK_IMAGE_URL = '../js/ext-3.4.0/resources/images/default/s.gif';    
  3.       
  4.     var win = new Ext.Window({  
  5.         el: 'window-win',  
  6.         layout: 'fit',  
  7.         title: 'Title',  
  8.         closable: true,  
  9.         closeAction: 'hide',  
  10.         width: 500,  
  11.         height: 300,  
  12.         items: [{}],  
  13.         maximizable: true,  
  14.         minimizable: true,  
  15.         constrain: true,  
  16.         buttons: [{  
  17.             text: '確定',  
  18.         }, {  
  19.             text: '取消'  
  20.         }]  
  21.     });  
  22.       
  23.     win.show();  
  24. });  
執行結果如下: 
 

預設情況下按鈕會以向右靠齊排列, 而我們可以透過設定參數 buttonAlign: 'center' (值可以是 center, left, right) 設定按鈕的對齊方式. 與按鈕的相關參數還有 defaultButton, 它用於視窗彈出後, 預設為使用者選擇一個按鈕. 如 defaultButton:0 在上面範例即是選擇 "確定" 按鈕. 下面範例代碼會在使用者彈出視窗後按下 Enter 後隱藏視窗(點下 "確定" 按鈕); 點下 "取消" 按鈕後彈出提示視窗: 
  1. buttons: [{  
  2.     text: '確定',  
  3.     handler: function(){  
  4.         win.hide();  
  5.     }  
  6. }, {  
  7.     text: '取消',  
  8.     handler: function(){  
  9.         Ext.Msg.alert('Info''Cancel!');  
  10.     }  
  11. }],  
  12. defaultButton:0  
視窗的其他配置選項: 
我們可以使用 resizable 控制視窗是否可以拖拉改變大小; modal:true 則是希望彈出視窗後, 立即遮罩頁面上其他元件, 只有在視窗關閉後才能繼續操作其他元件. 

視窗分組: 
在 Ext 中, 視窗是分組進行管理的, 我們可以對某一組中的視窗進行特定操作. 預設情況下視窗都在 Ext.WindowMgr 組中. 視窗分組由 Ext.WindowGroup 類別定義, 下面示範如何分組操作視窗: 
- 前台代碼 
  1. ...  
  2. <input id='new' type='button' name="add" value="new window"/>  
  3. <input id='back' type='button' name="add" value="to back"/>  
  4. <input id='hide' type='button' name="add" value="hide all"/>  
  5. <input id='show' type='button' name="add" value="show all"/>  
  6. ...  
- 後臺代碼: 
  1. var i=0, mygroup;  
  2.   
  3. function newWin()  
  4. {  
  5.     var win = new Ext.Window({  
  6.         title: "Win"+i++,  
  7.         width: 400,  
  8.         height: 300,  
  9.         maximizable: true,  
  10.         manager: mygroup  
  11.     });  
  12.     win.setPosition(i*10+30, i*10+30);  
  13.     win.show();  
  14. }  
  15.   
  16. function toBack()  
  17. {  
  18.     mygroup.sendToBack(mygroup.getActive());  
  19. }  
  20.   
  21. function hideAll()  
  22. {  
  23.     mygroup.hideAll();  
  24. }  
  25.   
  26. function showAll()  
  27. {  
  28.     mygroup.each(function(win){  
  29.         win.show();  
  30.     });  
  31. }  
  32.   
  33. Ext.onReady(function(){    
  34.     Ext.BLANK_IMAGE_URL = '../js/ext-3.4.0/resources/images/default/s.gif';    
  35.       
  36.     mygroup = new Ext.WindowGroup();  
  37.     Ext.get("new").on("click", newWin);  
  38.     Ext.get("back").on("click", toBack);  
  39.     Ext.get("hide").on("click", hideAll);  
  40.     Ext.get("show").on("click", showAll);  
  41. });  
執行結果: 

沒有留言:

張貼留言

網誌存檔

關於我自己

我的相片
Where there is a will, there is a way!