富客户端程序设计实例 - 视图层(Ext JS) - 页面与窗口的打开控制

11年前

   


        点击按钮打开一个窗口，包括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. }) ;  
        var pt = Ext.create("appUtils.pageHelper");    作为全局变量控制。Ext JS中在定义一个类之前引入是作为全局变量来控制，代码如下：
  1. var pt = Ext.create("appUtils.pageHelper"); 
  2. Ext.define('Hongbo.view.Viewport',  
  3. {  省略后续代码 ……
        在对应的打开窗体脚本中添加事件监听代码：
  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. });  
        在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. }