使用ExtJs開發(fā)MIS系統(tǒng)使用Action抽象客戶端操作

在客戶端系統(tǒng)中，或者說在任何系統(tǒng)中，同樣的操作是可以通過不同的方式激發(fā)的，比如說我們使用的瀏覽器，刷新當(dāng)前頁面可以點(diǎn)擊刷新按鈕，可以在右鍵菜單中選擇刷新，還可以按F5快捷鍵。但不管操作方式如何變化，操作本身是不變的，所以我們可以把這些操作抽象出來。
    來看以下代碼：
    1:　Srims.Action = new function(){
    2:　};
    3:
    4:　Srims.Action.doAction = function(e, t){
    5:　　　e.stopEvent();
    6:　　　var actionName = t.id.replace(’MenuBarItem-a-’, ’’);
    7:
    8:　　　if (!Srims.Action.actions[actionName]) {
    9:　　　alert(’對(duì)不起，該功能尚未實(shí)現(xiàn)?！?;
    10:　　　return;
    11:　　　}
    12:
    13:　　　Srims.Action.actions[actionName]();
    14:　};
    15:
    16:　Srims.Action.actions = {
    17:　　　’project-vertical-list’: function(){
    18:　　　Srims.Action._callProjectAction(’Srims.projects.listVerticalProject();’);
    19:　　　},
    20:　　　’project-horizontal-list’: function(){
    21:　　　Srims.Action._callProjectAction(’Srims.projects.listHorizontalProject();’);
    22:　　　}
    23:　};
    24:
    25:　Srims.Action._callProjectAction = function(fn){
    26:　　　if (Srims.projects) {
    27:　　　eval(fn);
    28:　　　}
    29:　　　else {
    30:　　　Srims.loadProjectModule(fn);
    31:　　　}
    32:　}
    以上代碼在使用ExtJs開發(fā)MIS系統(tǒng)（2）：Js的動(dòng)態(tài)加載出現(xiàn)過。該段代碼通過Srims.Action.actions定義系統(tǒng)中的所有操作，通過Srims.Action.doAction調(diào)用操作。Srims.Action.doAction接受兩個(gè)參數(shù)，第一參數(shù)是點(diǎn)擊事件的參數(shù)，第二個(gè)參數(shù)是激發(fā)該點(diǎn)擊操作的元素。如果激發(fā)該操作的元素的ID和對(duì)應(yīng)操作有一定的關(guān)系，那么就可以直接映射到某一個(gè)操作。例如我們將Srims.Action.doAction綁定到以下html上
    

    
• 
      縱向項(xiàng)目列表
      

    
• 
      橫向項(xiàng)目列表
      

    

    其中a標(biāo)簽的ID和操作名稱的對(duì)應(yīng)關(guān)系是在操作名稱前加前綴“MenuBarItem-a-”，所以我們?cè)赟rims.Action.doAction中使用var actionName = t.id.replace(’MenuBarItem-a-’, ’’)替換掉前綴后，就可以得到對(duì)應(yīng)的操作名稱了了，然后就可以調(diào)用Srims.Action.actions[actionName]()執(zhí)行該操作。當(dāng)然執(zhí)行操作以前，還可以使用
    if (!Srims.Action.actions[actionName]) {
    alert(’對(duì)不起，該功能尚未實(shí)現(xiàn)。’);
    return;
    }確定該操作是否已經(jīng)完成。
    綁定操作使用ExtJs中的事件處理方法，示例代碼如下：
    var ab = Srims.MenuBar.getMenuBar().body;
    ab.on(’mousedown’, Srims.Action.doAction, null, {delegate:’a’});
    ab.on(’click’, Ext.emptyFn, null, {delegate:’a’, preventDefault:true});