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>  
   

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

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

    function makeDateFields(){  
      var els=Ext.select("input.date-picker",true);  
      els.each(function(el){  
       var df = new Ext.form.DateField({"format":'d-M-Y',"altFormats":'j|j/n|j/n/y|j/n/Y|j-M|j-M-y|j-M-Y'});  
       df.applyToMarkup(el);  
      })  
    }  
   

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

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

3. Создать на странице Apex Item типа TEXTFIELD и указать в свойстве Element->HTML Form Element Attributes следующее значение:
   

    class="date-picker"  
   

Пример:

Application Express: использование COMBOBOX из фреймворка ExtJS

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

    function makeComboboxis(){  
      var els=Ext.select("select.combobox",true);  
      els.each(function(el){  
       var converted = new Ext.form.ComboBox({  
       typeAhead: true,  
       triggerAction: 'all',  
       transform: el,  
       width:200,//el.getWidth(),  
       forceSelection:true  
      });  
      })  
    }  
   

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

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

3. Создать на странице Apex Item типа SELECT и указать в свойстве Element->HTML Form Element Attributes следующее значение:
   

    class="combobox"  
   

Application Express: использование TEXTFIELD с возможностью изменения размера из фреймворка ExtJS

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

    function makeResizableTextFields(){  
      var els=Ext.select("input.textfield",true);  
      els.each(function(el){  
       var dwrapped = new Ext.Resizable(el, {  
         wrap:true,  
         pinned:true,  
         handles:'e',  
         dynamic: true,  
         width:el.getWidth(),  
         height:el.getHeight(),  
         minWidth:el.getWidth(),  
         minHeight: el.getHeight()  
      });  
      })  
    }  
   

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

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

3. Создать на странице Apex Item типа TEXTFIELD и указать в свойстве Element->HTML Form Element Attributes следующее значение:
   

    class="textfiled"  
   

Application Express: использование TEXTAREA с возможностью изменения размера из фреймворка ExtJS

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

    function makeResizableTextAreas(){  
      var els=Ext.select("textarea",true);  
      els.each(function(el){  
       var dwrapped = new Ext.Resizable(el, {  
         wrap:true,  
         pinned:true,  
         handles:'e',  
         dynamic: true,  
         width:el.getWidth(),  
         height:el.getHeight(),  
         minWidth:el.getWidth(),  
         minHeight: el.getHeight()  
      });  
      })  
    }  
   

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

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

Интеграция Oracle Application Express и ExtJS

ExtJS - одна из наиболее популярных и функциональных JavaScript-библиотек для разработки веб-приложений и пользовательских интерфейсов.

Инсталляция

1. Скачать последнюю версию ExtJS - http://www.extjs.com/products/extjs/download.php
2. Для EPG: открыть FTP-порт в XMLDB. Для этого зайти в SQL*Plus пользователем SYSTEM:

    SQL> exec dbms_xdb.setftpport('2100');  
    PL/SQL procedure successfully completed.  
    SQL> alter system register;  
    System altered.  
   

3. Для EPG: распаковать дистрибутив extJS и загрузить его на ftp://server_adress:2100/i/themes/,где server_adress - хост сервера БД
4. Для EPG: закрыть FTP-порт в XMLDB. Для этого зайти в SQL*Plus пользователем SYSTEM:

    SQL> exec dbms_xdb.setftpport('0');  
    PL/SQL procedure successfully completed.  
    SQL> alter system register;  
    System altered.  
   

5. Для HTTP-Server: распаковать дистрибутив extJS в директорию /i/themes, где i - image-директория Apex

Использование extJS в Oracle APEX

1. Home -> Application Builder -> Application 101 -> Shared Components -> Templates -> Edit Page Template
Header Definition:

2. Добавить следующий фрагмент кода в HTML Header:
   
   
   
   
3. Добавить следующий фрагмент в HTML Body Attribute: onload="makeResizable();"
4. Добавить элемент типа TEXTAREA.
5. Изменить значение Edit Page -> Display Attributes -> Cursor Focus на «Do not focus cursor»
6. Запустить данную страницу.