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