富客戶端程序設計實例 - 視圖層(Ext JS) - 頁面與窗口的打開控制

Yangcl 11年前發布 | 6K 次閱讀


   


        點擊按鈕打開一個窗口，包括Windows窗口和Panel窗體。每次點擊按鈕不能打開多個窗體。設計的原則是打開窗口時，保存這個要打開的組件的ID；當關閉這個窗口的時候，對應在數組中刪除這個組件的ID。這個類是pageHelper.js。代碼如下：

  1. var list = new Array();  

  2. Ext.define("appUtils.pageHelper" ,        //類名定義包含文件夾  

  3. {   

  4.         // 添加一個組件 ID 到 ArrayList 中  

  5.         addComponentID : function(id)  

  6.         {  

  7.                 Ext.Array.push(list , id);  

  8.         } ,  

  9.   

  10.         //判斷組件如 window/tab panel 等是否已打開  參數：組件id  

  11.         isComponentOpen  :  function(id)  

  12.         {  

  13.             var isOpen = Ext.Array.contains(list, id );  

  14.             if(isOpen == true){  

  15.                 return true;  

  16.             }  

  17.             else{  

  18.                 return false;  

  19.             }  

  20.         },  

  21.   

  22.         //移除這個組件Id  

  23.         removeComponentID : function(id)  

  24.         {  

  25.             Ext.Array.remove(list , id) ;  

  26.         } ,  

  27.   

  28.        // 控制頁面視圖中間區域被打開的Tab、panel等組件的關閉與開啟 ---控制的控件為Panel及其子類  

  29.        panelComponentController : function(compName )  

  30.        {  

  31.            //根據centerArea組件的ID來獲取這個對象 ，然后調用add方法  

  32.            var centerArea = Ext.getCmp("centerTab");  

  33.            var openedComp = Ext.create(compName);  

  34.            //創建對象與獲取對象不同；創建：對象沒有加載和顯示。獲取：對象已經加載  

  35.            if(openedComp.isPanel == true)          //方法只用于panel及其子類對象  

  36.            {  

  37.                if( this.isComponentOpen(openedComp.id) ==  false )  

  38.                {  

  39.                    centerArea.add(openedComp);     //在Viewpoint的中心加入一個新Tab頁  

  40.                    this.addComponentID(openedComp.id);  

  41.                }  

  42.                else {  

  43.                    //數組中包含組件ID，代表組件已經打開  

  44.                    console.log("The panel has opened");  

  45.                }  

  46.            }  

  47.            else{  

  48.                console.log("該方法只用于 panel對象及其子類對象");  

  49.                return ;  

  50.            }  

  51.        } ,  

  52.   

  53.        //控制被打開的Windows組件  --控制條件為windows及其子類組件  

  54.        windowComponentController : function(compName)  

  55.        {  

  56.            var winComp = Ext.create(compName);  

  57.            if(winComp.isWindow == true)  

  58.            {  

  59.                if(this.isComponentOpen(winComp.id) == false)  

  60.                {  

  61.                    winComp.show();  

  62.                    this.addComponentID(winComp.id)  

  63.                }  

  64.                else{  

  65.                    //數組中包含組件ID，代表組件已經打開  

  66.                    console.log("The window has opened .")  

  67.                }  

  68.            }  

  69.            else{  

  70.                console.log("該方法只用于 window 對象及其子類對象");  

  71.                return ;  

  72.            }  

  73.   

  74.        } ,  

  75.   

  76.        // 控制頁面視圖中間區域被打開的Tab、panel等組件的關閉與開啟 ---Container對象及其子類對象  

  77.        containerComponentController : function(compName )  

  78.        {  

  79.             var centerArea = Ext.getCmp("centerTab");  

  80.             var openedComp = Ext.create(compName);  

  81.             if(openedComp.isContainer == true)          //方法只用于panel及其子類對象  

  82.             {  

  83.                 if( this.isComponentOpen(openedComp.id) ==  false )  

  84.                 {  

  85.                     centerArea.add(openedComp);     //在Viewpoint的中心加入一個新Tab頁  

  86.                     this.addComponentID(openedComp.id);  

  87.                 }  

  88.                 else {  

  89.                     console.log("The panel has opened");  

  90.                 }  

  91.             }  

  92.             else{  

  93.                 console.log("該方法只用于 Container 對象及其子類對象");  

  94.                 return ;  

  95.             }  

  96.         }   

  97. }) ;  
    98. </ol> </div> </div>

            var pt = Ext.create("appUtils.pageHelper");    作為全局變量控制。Ext JS中在定義一個類之前引入是作為全局變量來控制，代碼如下：

    1. var pt = Ext.create("appUtils.pageHelper"); 

    2. Ext.define('Hongbo.view.Viewport',  

    3. {  省略后續代碼 ……
      4. </ol> </div> </div>

              在對應的打開窗體腳本中添加事件監聽代碼：

      1. Ext.define('Hongbo.view.west.childViews.DaKa_Tabpanel',  

      2. {   

      3.         extend:"Ext.tab.Panel",  

      4.         alias : 'widget.DaKaTabpanel',  

      5.         id:'DaKaTab',    

      6.         title: '異動申請 ' ,  

      7.         closable: true,  

      8.         closeAction:'destroy'  ,  

      9.         listeners:  

      10.         {  

      11.             'close':function()      

      12.             {  

      13.                 pt.removeComponentID("DaKaTab");  

      14.             }   

      15.         }   

      16. });  
        17. </ol> </div> </div>

                在westArea.js中調用某一個窗口的代碼：

        1. {  

        2.     xtype:"button",  

        3.     text:"CURD",  

        4.     width:150,  

        5.     height:40,  

        6.     handler:function()  

        7.     {   

        8.        pt.containerComponentController('Hongbo.view.west.childViews.ChaKan_table')  

        9.     }  

        10. }  
          11. </ol> </div> </div>


         本文由用戶 Yangcl 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
         轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
         本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
        寫博客

        博客分類