воскресенье, 21 февраля 2010 г.

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"  
    

Пример:

пятница, 12 февраля 2010 г.

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

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

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

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

среда, 10 февраля 2010 г.

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"  
    

суббота, 6 февраля 2010 г.

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"  
    

пятница, 5 февраля 2010 г.

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();  
     });  
    

понедельник, 1 февраля 2010 г.

Интеграция 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
  2. Header Definition:
  3. Добавить следующий фрагмент кода в HTML Header:

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