Application Express: использование всплывающих модальных окон из фреймворка ExtJS

Открытие модального окна

1. Создать JavaScript-файл или добавить в Header Definition:

    function initializePopupWindows(){  
      try{  
       // Define an iframe component, better for garbage collection  
       Ext.ux.IFrameComponent = Ext.extend(Ext.BoxComponent, {  
         url : null,  
         onRender : function(ct, position){  
          var url = this.url;  
          this.el = ct.createChild({tag: 'iframe', id: 'iframe-'+ this.id, frameBorder: 0, src: url, "SCROLLING":'NO'});  
       }  
       });  
      Ext.reg('iframe', Ext.ux.IFrameComponent);  
      Ext.ux.PopupWindow = Ext.extend(Ext.Window, {  
       url: '',  
       title: '',  
       width: 700,  
       height: 600,  
       resizable: true,  
       maximizable: true,  
       initComponent: function(){  
         this.isProcessed = false;  
         var config = {  
          border: false,  
          closable: true,  
          closeAction: 'close',  
          height: this.height,  
          items: [ new Ext.ux.IFrameComponent({ id: id, url: this.url }) ],  
          layout: 'fit',  
          modal: true,  
          plain: false,  
          title: this.title,  
          width: this.width  
       };  
       // apply config  
       Ext.apply(this, Ext.apply(this.initialConfig, config));  
       Ext.ux.PopupWindow.superclass.initComponent.call(this);  
       // define custom events  
       this.addEvents('success');  
      },  
      processSuccessful: function(){  
       this.isProcessed = true;  
       this.fireEvent("success", this);  
      },  
      hasChanged: function() {  
       return this.isProcessed;  
      },  
      show: function(){  
       this.isProcessed = false;  
       Ext.ux.PopupWindow.superclass.show.call(this);  
      },  
      // private  
      initTools : function(){  
       // over-ride Ext.Window functions adding qtips to original code  
       if(this.minimizable){  
         this.addTool({  
          id: 'minimize',  
          handler: this.minimize.createDelegate(this, []),  
          qtip: 'Minimize'  
         });  
       }  
       if(this.maximizable){  
         this.addTool({  
          id: 'maximize',  
          handler: this.maximize.createDelegate(this, []),  
          qtip: 'Maximize'  
         });  
         this.addTool({  
          id: 'restore',  
          handler: this.restore.createDelegate(this, []),  
          hidden:true,  
          qtip: 'Restore size'  
         });  
         this.header.on('dblclick', this.toggleMaximize, this);  
       }  
       if(this.closable){  
         this.addTool({  
          id: 'close',  
          handler: this[this.closeAction].createDelegate(this, []),  
          qtip: 'Close'  
         });  
       }  
      }  
      });  
      Ext.reg('PopupWindow', Ext.ux.PopupWindow);  
      } catch(err){}  
    }  
    function openModalWindow(pageNumber, windowHeight,windowWidth,windTitle){  
      var newURL = window.location.protocol + "//" + window.location.host + "/apex/f?p=" +Ext.getDom('pFlowId').value+":"+pageNumber+":"+Ext.getDom('pInstance').value+":::::";  
      var wind=new Ext.ux.PopupWindow({url: newURL , height: windowHeight,width: windowWidth, title: windTitle});  
      wind.show();  
    }  
    function openModalWindowWithParams(pageNumber, windowHeight,windowWidth,paramNames,paramValues,windTitle){  
      var newURL = window.location.protocol + "//" + window.location.host + "/apex/f?p=" +Ext.getDom('pFlowId').value+":"+pageNumber+":"+Ext.getDom('pInstance').value+"::::"+paramNames+":"+paramValues;  
      var wind=new Ext.ux.PopupWindow({url: newURL , height: windowHeight,width: windowWidth, title: windTitle});  
      wind.show();  
    }  
    function openModalWindowWithParamsNotResizable(pageNumber, windowHeight,windowWidth,paramNames,paramValues,windTitle){  
      var newURL = window.location.protocol + "//" + window.location.host + "/apex/f?p=" +Ext.getDom('pFlowId').value+":"+pageNumber+":"+Ext.getDom('pInstance').value+"::::"+paramNames+":"+paramValues;  
      var wind=new Ext.ux.PopupWindow({url: newURL , height: windowHeight,width: windowWidth, title: windTitle, resizable:false,maximizable:false});  
      wind.show();  
    }  
   

2. Добавить в onload body вызов данной функции (initializePopupWindows) или использовать метод onReady фреймворка ExtJS:
   

    Ext.onReady(function(){  
      Ext.BLANK_IMAGE_URL = '/i/1px_trans.gif';  
      // Create namespace if doesn't already exist  
      Ext.namespace('Ext.ux');  
      //Здесь последовательность вызовов функций, например:  
      initializePopupWindows();  
    });  
   

3. Чтобы открыть окно по нажатию на кнопку необходимо установить значение "URL Target" для данной кнопки:
   

      javascript:openModalWindow(номер_страницы,высота_окна,ширина_окна,имя_окна)  
   

   например для открытия страницы 170, с высотой окна 470, с шириной окна 660 и именем "Modal Popup Window":
   

      javascript:openModalWindow(170,470,660,'Modal Popup Window')  
   

Закрытие окна

1. Создать JavaScript-файл или добавить в Header Definition:
   

    function closePopupWindow(){  
      try{  
       parent.Ext.WindowMgr.getActive().close();  
      }catch(err){}  
    }  
    function closePopupWindowWithRefresh(){  
      try {  
       parent.gReport.pull();  
      }catch(err){  
       parent.location.href=parent.location.href;  
      }  
      try {  
       parent.Ext.WindowMgr.getActive().close();  
      }catch(err){}  
    }  
   

2. Добавить следующий текст в поле Success Message в процесс DML или PL/SQL всплывающего окна:
   

    <script type="text/javascript">  
     closePopupWindowWithRefresh();  
    </script>