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"  
   

Пример:

Размышления об JavaScript-фреймворке для Aplication Express

В связи со скорым выходом Apex 4.0 (в который будет интегрирован фреймворк jQuery и основные функциональные возможности будут реализованны на данном фреймворке), думаю что использовать фреймворк ExtJS будет не рационально в большинстве случаев, с учётом большей модульности, легковесности и производительности jQuery.

Некоторые интересные посты про JavaScript-фреймворки и их сравнение:

1. Интересный онлайн-тест производительности JS-фреймворков:
   • Dojo Toolkit, Prototype, ExtJS, jQuery
   • только ExtJS и jQuery
2. Производительность JavaScript-фреймворков
3. Сравнение скорости популярных JS библиотек

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. Запустить данную страницу.