程式扎記

Quiz:
請試著寫出下面代碼的輸出:

view plaincopy to clipboardprint?
#include   
#include   
  
int main()  
{  
  char strAry[] = "This is string";  
  char *aryPtr = strAry;  
  int *intPtr = (int*)strAry;  
  printf("\t[Line01] strAry=%s\n", strAry);  
  printf("\t[Line02] aryPtr=%s\n", aryPtr);  
  //printf("\t[LineX] *aryPtr=%s\n", *aryPtr); // Segment fault  
  printf("\t[Line03] sizeof(aryPtr)=%d\n", sizeof(aryPtr));  
  printf("\t[Line04] sizeof(*aryPtr)=%d\n", sizeof(*aryPtr));  
  printf("\t[Line05] *aryPtr='%c'\n", *aryPtr);  
  printf("\t[Line06] *aryPtr+1='%c'\n", *aryPtr+1);  
  printf("\t[Line07] *(aryPtr+1)='%c'\n", *(aryPtr+1));  
  printf("\t[Line08] sizeof(intPtr)=%d\n", sizeof(intPtr));  
  printf("\t[Line09] sizeof(*intPtr)=%d\n", sizeof(*intPtr));  
  printf("\t[Line10] intPtr=%s\n", intPtr);  
  //printf("\t[LineX] *intPtr=%s\n", *intPtr); // Segment fault  
  printf("\t[Line11] *intPtr='%c'\n", *intPtr);  
  printf("\t[Line12] *intPtr+1='%c'\n", *intPtr+1);  
  printf("\t[Line13] *(intPtr+1)='%c'\n", *(intPtr+1));  
  return 0;  
}  

Sol:

[Line01] strAry=This is string # 字串陣列 char[] ="..." 會自動加上 NULL 到結尾.
[Line02] aryPtr=This is string # 同上, 只是把 aryPtr 指標指向 strAry 的位置. strAry 本身也是個指標.
[Line03] sizeof(aryPtr)=4 # 指標的大小根據系統是 32bit (4byte) 或是 64bit(8bypte) 有所不同.
[Line04] sizeof(*aryPtr)=1 # char 的大小為 1 byte.
[Line05] *aryPtr='T' # 指向字串中第一個字元 'T'
[Line06] *aryPtr+1='U' # char 'T' + 1=char 'U'. -> ASCII 'T'=84. 84+1=85=ASCII 'U'.
[Line07] *(aryPtr+1)='h' # 將 aryPtr 指標移動一個 char 的位置 (1 個 byte 的距離), 即是字串的第二個字元 'h'.
[Line08] sizeof(intPtr)=4 # 同 Line03
[Line09] sizeof(*intPtr)=4 # int 類型的大小為 4 byte.
[Line10] intPtr=This is string # 雖然用 int* 指定 pointer 類型, 但是在 printf 使用 '%s', 故還是打印出字串出來.
[Line11] *intPtr='T' # 指向字串中第一個字元 'T'.
[Line12] *intPtr+1='U' # 同 Line6
[Line13] *(intPtr+1)=' ' # 因為指標類型為 int, 故移動一個位置為 4 byte, 所以指向第 0+4 =4 位置上的字元, 即字串的第五個字元 (從 0 開始).

This message was edited 4 times. Last update was at 26/02/2013 18:29:39

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

建立一個視窗:
先看看一個簡單範例:

view plaincopy to clipboardprint?
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();  
});  

上面的 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 參數設定視窗下的按鈕, 範例代碼如下:

view plaincopy to clipboardprint?
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 後隱藏視窗(點下 "確定" 按鈕); 點下 "取消" 按鈕後彈出提示視窗:

view plaincopy to clipboardprint?
buttons: [{  
    text: '確定',  
    handler: function(){  
        win.hide();  
    }  
}, {  
    text: '取消',  
    handler: function(){  
        Ext.Msg.alert('Info', 'Cancel!');  
    }  
}],  
defaultButton:0  

視窗的其他配置選項:
我們可以使用 resizable 控制視窗是否可以拖拉改變大小; modal:true 則是希望彈出視窗後, 立即遮罩頁面上其他元件, 只有在視窗關閉後才能繼續操作其他元件.

視窗分組:
在 Ext 中, 視窗是分組進行管理的, 我們可以對某一組中的視窗進行特定操作. 預設情況下視窗都在 Ext.WindowMgr 組中. 視窗分組由 Ext.WindowGroup 類別定義, 下面示範如何分組操作視窗:
- 前台代碼

view plaincopy to clipboardprint?

...
<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"/>
...

- 後臺代碼:

view plaincopy to clipboardprint?
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);  
});  

執行結果:

程式扎記

標籤

2013年2月26日星期二

[C 常見考題] Pointer Quiz - Part1

2013年2月23日星期六

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

[Git 常見問題] error: The following untracked working tree files would be overwritten by merge

檢舉濫用情形

學習筆記

標籤

2013年2月26日 星期二