從外表來看, Window 和 MessageBox 外在長相與功能很像似, 這是因為 Ext.MessageBox 內部也是基於 Ext.Window 實現的.
建立一個視窗:
先看看一個簡單範例:
- Ext.onReady(function(){
- Ext.BLANK_IMAGE_URL = '../js/ext-3.4.0/resources/images/default/s.gif';
- var win = new Ext.Window({
- el: 'window-win',
- layout: 'fit',
- title: 'Title',
- closable: true,
- closeAction: 'hide',
- width: 600,
- height: 350,
- items: [{}],
- buttons: [{
- text: 'Button',
- }]
- });
- win.show();
- });
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 參數設定視窗下的按鈕, 範例代碼如下:
- Ext.onReady(function(){
- Ext.BLANK_IMAGE_URL = '../js/ext-3.4.0/resources/images/default/s.gif';
- var win = new Ext.Window({
- el: 'window-win',
- layout: 'fit',
- title: 'Title',
- closable: true,
- closeAction: 'hide',
- width: 500,
- height: 300,
- items: [{}],
- maximizable: true,
- minimizable: true,
- constrain: true,
- buttons: [{
- text: '確定',
- }, {
- text: '取消'
- }]
- });
- win.show();
- });
預設情況下按鈕會以向右靠齊排列, 而我們可以透過設定參數 buttonAlign: 'center' (值可以是 center, left, right) 設定按鈕的對齊方式. 與按鈕的相關參數還有 defaultButton, 它用於視窗彈出後, 預設為使用者選擇一個按鈕. 如 defaultButton:0 在上面範例即是選擇 "確定" 按鈕. 下面範例代碼會在使用者彈出視窗後按下 Enter 後隱藏視窗(點下 "確定" 按鈕); 點下 "取消" 按鈕後彈出提示視窗:
- buttons: [{
- text: '確定',
- handler: function(){
- win.hide();
- }
- }, {
- text: '取消',
- handler: function(){
- Ext.Msg.alert('Info', 'Cancel!');
- }
- }],
- defaultButton:0
我們可以使用 resizable 控制視窗是否可以拖拉改變大小; modal:true 則是希望彈出視窗後, 立即遮罩頁面上其他元件, 只有在視窗關閉後才能繼續操作其他元件.
視窗分組:
在 Ext 中, 視窗是分組進行管理的, 我們可以對某一組中的視窗進行特定操作. 預設情況下視窗都在 Ext.WindowMgr 組中. 視窗分組由 Ext.WindowGroup 類別定義, 下面示範如何分組操作視窗:
- 前台代碼
- ...
- <input id='new' type='button' name="add" value="new window"/>
- <input id='back' type='button' name="add" value="to back"/>
- <input id='hide' type='button' name="add" value="hide all"/>
- <input id='show' type='button' name="add" value="show all"/>
- ...
- var i=0, mygroup;
- function newWin()
- {
- var win = new Ext.Window({
- title: "Win"+i++,
- width: 400,
- height: 300,
- maximizable: true,
- manager: mygroup
- });
- win.setPosition(i*10+30, i*10+30);
- win.show();
- }
- function toBack()
- {
- mygroup.sendToBack(mygroup.getActive());
- }
- function hideAll()
- {
- mygroup.hideAll();
- }
- function showAll()
- {
- mygroup.each(function(win){
- win.show();
- });
- }
- Ext.onReady(function(){
- Ext.BLANK_IMAGE_URL = '../js/ext-3.4.0/resources/images/default/s.gif';
- mygroup = new Ext.WindowGroup();
- Ext.get("new").on("click", newWin);
- Ext.get("back").on("click", toBack);
- Ext.get("hide").on("click", hideAll);
- Ext.get("show").on("click", showAll);
- });
沒有留言:
張貼留言