пятница, 5 марта 2010 г.

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>  
    


Комментариев нет:

Отправить комментарий

Рейтинг@Mail.ru Рейтинг блогов Protected by Copyscape Web Plagiarism Tool