Load APEX-AT-WORK Examples...

Version:
1.5.0

Last update:
06.08.2009

Creator:
Tobias Arnhold

Email:
Tobias Arnhold (tobias-arnhold@hotmail.de)

Blog:
APEX at Work (http://apex-at-work.blogspot.com/)

Visitors:

Username:
APEX_PUBLIC_USER
Feature list     
 
- Tree is based on a two level hierarchy (node-leafs)
- ExtJS tree needs three parts:
    - Ext layout where tree is integrated inside the west-panel
    - Application process to get the json data
    - DB package to create json string
 
   
Updated ExtJS javascript template (no tab)     
 
/*
 * Enhanced by:
 * Copyright(c) 2009, Tobias Arnhold
 *
 * Source:
 * Copyright(c) 2008, Mark Lancaster.
 *
 * This code is licensed under BSD license. Use it as you wish,
 * but keep this copyright intact.
*/

// -------------------------------------------------------------------------------------------------------- //
// Date conversion - convert inputs with class "date-picker" to date fields                                 //
// -------------------------------------------------------------------------------------------------------- //
function makeDateFields(){
  var els=Ext.select("input.date-picker",true);
  els.each(function(el){
    var df = new Ext.form.DateField({"format":'d.m.Y'});
      // var df = new Ext.form.DateField({"format":'d.m.Y',"altFormats":'Y|m.Y|d.m.y'});
	  // altFormats - other possible formats
	df.applyToMarkup(el);
  })
}

// -------------------------------------------------------------------------------------------------------- //
// Inititallizing parameters                                                                                //
// -------------------------------------------------------------------------------------------------------- //
Ext.onReady(function(){
   // startup function, this method is automatically called once the DOM is fully loaded

   // saves width information in customizable region by a cookie
   Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

   // tranparent gif is for used as an wildcard for the inline icons of a tree
   Ext.BLANK_IMAGE_URL = '/i/1px_trans.gif';

   // Enable Quicktip functionality
   Ext.QuickTips.init();

   // Ext.ns('Ext.ux.form');

// -------------------------------------------------------------------------------------------------------- //
// ExtJS Tree request - Call Application process to get all tree data in JSON format                        //
// -------------------------------------------------------------------------------------------------------- //
// Create Application process
var TreeRequest = new htmldb_Get(null,$v('pFlowId'),'APPLICATION_PROCESS=AP_GET_EXTJS_TREE_DATA',0);

// Get data from application process
var TreeResponse = TreeRequest.get();

// Replace APP_ID
TreeResponse = TreeResponse.replace(/APP_ID/g, $v('pFlowId'));

// Replace SESSION_ID
TreeResponse = TreeResponse.replace(/SESSION_ID/g, $v('pInstance'));

//Check if there is a response
if (TreeResponse) {
   // create json object
   var v_extjs_tree_data= TreeResponse.parseJSON();
   }

// -------------------------------------------------------------------------------------------------------- //
// Definition of the grafical layout construction                                                           //
// -------------------------------------------------------------------------------------------------------- //

   // logo area
   var logo_area = new Ext.BoxComponent({ // raw
		region:'north',
		el: 'logo_area',
		height:45
	});

   // menu navigation area
    var menu_area = new Ext.Panel({
	    region:'west',
		id:'west-panel',
    	//frame:true,
    	contentEl:'menu_area',
    	title: 'Menu',
        border: true,
        bodyBorder: true,
    	collapsible:true,
		collapseMode: 'mini',
    	titleCollapse: true,
		split:true,
		width: 280,
		minSize: 250,
		maxSize: 400,
		layout:'accordion',
		layoutConfig: {
                animate: true
            },
		items: [{
		contentEl: 'region_extjs_tree',
		title:'Navigation - ExtJS tree',
		autoScroll:true,
        border: false,
		layout: 'fit',
		items:new Ext.tree.TreePanel({
                 loader:new Ext.tree.TreeLoader({
				   preloadChildren: true,
				   baseAttrs: {
		             allowDrag: false}
                     })
				 ,id:'extjs_tree'
				 ,enableDD:false
                 ,autoScroll: true
                 ,root:new Ext.tree.AsyncTreeNode({
				  id:'async_extjs_tree'
                  ,expanded:true
                  ,text:'Tree Root'
                  ,children:v_extjs_tree_data
            })
        })
		},{
		contentEl: 'region_position_01',
		title:'Navigation - APEX tree',
		autoScroll:true,
        border: false,
		layout: 'fit'
		},{
		contentEl: 'region_position_02',
		title:'About APEX-AT-WORK',
		autoScroll:true,
        border: false,
		layout: 'fit'
		}]
    });

    // work area
   // menu navigation area
    var work_area  = new Ext.Panel({
	    region:'center',
		id:'center',
    	contentEl:'work_area',
    	title: 'Work area',
        border: true,
        bodyBorder: true,
		split:true,
		autoScroll: true,
		layout:'accordion',
		layoutConfig: {
                animate: true
            }
    });

    // bottom area
	var bottom_area = new Ext.BoxComponent({ // raw
	region:'south',
	el: 'bottom_area',
	height:40
	});

// -------------------------------------------------------------------------------------------------------- //
// Configure Viewport                                                                                       //
// -------------------------------------------------------------------------------------------------------- //

	Ext.ux.FormViewport = Ext.extend(Ext.Container, {

	initComponent : function() {
	   Ext.ux.FormViewport.superclass.initComponent.call(this);
	   document.getElementsByTagName('html')[0].className += ' x-viewport';

	   // applyTo specified element
	   this.el = Ext.get('wwvFlowForm');
	   if (!this.el) {
		   this.el = Ext.getBody();
	   } else {
		   // disable scroll on body
		   Ext.getBody().dom.scroll = 'no';
	   }

	   this.el.setHeight = Ext.emptyFn;
	   this.el.setWidth = Ext.emptyFn;
	   this.el.setSize = Ext.emptyFn;
	   this.el.dom.scroll = 'no';
	   this.allowDomMove = false;
	   this.autoWidth = true;
	   this.autoHeight = true;
	   Ext.EventManager.onWindowResize(this.fireResize, this);
	   this.renderTo = this.el;
	},

	fireResize : function(w, h){
	   this.fireEvent('resize', this, w, h, w, h);
	}
	});

	Ext.reg('FormViewport', Ext.ux.FormViewport);

    viewport = new Ext.Viewport({
           // applyTo:'wwvFlowForm',
		   layout:'border',
           items:[logo_area,menu_area,work_area,bottom_area]});

// -------------------------------------------------------------------------------------------------------- //
// Set up APEX developer toolbar                                                                            //
// -------------------------------------------------------------------------------------------------------- //

	Ext.app.moveDeveloperToolbar = function() {
	  var dest = Ext.get('DeveloperToolbar');
	  if (dest) {
		  var els=Ext.select("table[summary='Developer Toolbar']",false);
		  els.each(function(el){
			  el.replace(dest);
		  })
	  }
	}

	/** any other stuff you want to include */
	Ext.app.moveDeveloperToolbar();
// -------------------------------------------------------------------------------------------------------- //
// Start date conversion                                                                                    //
// -------------------------------------------------------------------------------------------------------- //

	// fix for firefox bug - datepicker width becomes over 1000px
	// http://vacskamati.blogspot.com/2008/04/extjs-datepicker-patch-for-firefox-3.html
	Ext.DatePicker.prototype.brokenOnRender = Ext.DatePicker.prototype.onRender;
	Ext.DatePicker.prototype.onRender = function(container, position){
		// this.update has to be called only after setting width
		var originalUpdate = this.update;
		this.update = Ext.emptyFn;

		this.brokenOnRender(container, position);

		this.el.dom.style.width = '10px';
		this.update = originalUpdate;
		this.update(this.value);
	}

	// create date fields
    makeDateFields();

// -------------------------------------------------------------------------------------------------------- //
// Stop loading mask for startup period, when all elements get loaded                                       //
// -------------------------------------------------------------------------------------------------------- //
	setTimeout(function(){
	 Ext.get('loading').remove();
	 Ext.get('loading-mask').fadeOut({remove:true});
	}, 250);
});
 
   
Application process: AP_GET_EXTJS_TREE_DATA     
  DECLARE
-- JSON TREE DATA
V_TREE_DATA VARCHAR2(3000);
BEGIN
-- set text
V_TREE_DATA := pkg_aaw.fnc_get_tree_data_in_json;

HTP.prn (V_TREE_DATA);
END;
 
   
DB package for JSON data conversion     
 
create or replace package PKG_AAW is
-----------------------------------------------------------------------
-- Creator : ARNHOLD_TOBIAS
-- Creation date  : 29.04.2009 15:04:00
-- Intention      : APEX at Work application package
-----------------------------------------------------------------------

-----------------------------------------------------------------------
-- Global package variables and types
-----------------------------------------------------------------------

  -- Public type declaration
  -- type <Name> is <Data type>;

  -- Public variable declaration
  -- <Name> <Data type>;

-----------------------------------------------------------------------
-- Public function and procedure declaration
-----------------------------------------------------------------------
  function FNC_GET_TREE_DATA_IN_JSON return varchar2 ;

end PKG_AAW;

create or replace package body PKG_AAW is
-----------------------------------------------------------------------
-- Private functions and procedures
-----------------------------------------------------------------------

  -- Variables for Oracle error messages
   v_err_num                NUMBER;
   v_err_msg                VARCHAR2(100);
   v_err_return             varchar2(1000);


-----------------------------------------------------------------------
-- Name:    FNC_GET_TREE_DATA_IN_JSON
-- Type:    Function
-- Task:    Create tree data in JSON format
-----------------------------------------------------------------------
function FNC_GET_TREE_DATA_IN_JSON return varchar2 is
-- Variables
-- JSON TREE DATA
V_TREE_DATA        VARCHAR2(4000);

V_ST_ID_LEVEL1     NUMBER;
V_ST_NAME_LEVEL1   VARCHAR2(100);
V_ST_PAGE_LEVEL1   NUMBER;

V_ST_ID_LEVEL2     NUMBER;
V_ST_NAME_LEVEL2   VARCHAR2(100);
V_ST_PAGE_LEVEL2   NUMBER;

V_LEVEL1_COUNTER   NUMBER;
V_LEVEL2_COUNTER   NUMBER;

-- Cursor
  -- cursor declaration
  CURSOR c_tree_level1 IS
      select ST_ID,
             ST_NAME,
             ST_PAGE
      from aaw_solution_tree t
      where st_parent = 1;

  -- cursor declaration
  CURSOR c_tree_level2 IS
      select ST_ID,
             ST_NAME,
             ST_PAGE
      from aaw_solution_tree t
      where st_parent = V_ST_ID_LEVEL1;
BEGIN

  -- Load first record
  OPEN c_tree_level1;
  -- Fetch row
  FETCH c_tree_level1
    INTO V_ST_ID_LEVEL1, V_ST_NAME_LEVEL1, V_ST_PAGE_LEVEL1;
  LOOP
    EXIT WHEN c_tree_level1%NOTFOUND;
       IF V_LEVEL1_COUNTER IS NULL THEN
          V_TREE_DATA := '[{"id":'||V_ST_ID_LEVEL1||',"text":"'||V_ST_NAME_LEVEL1||'","href":"f?p=APP_ID:'||V_ST_PAGE_LEVEL1||':SESSION_ID::NO:","leaf" : false, "cls" : "folder", "children" : [';
          V_LEVEL1_COUNTER := 1;
       ELSE
          V_TREE_DATA := V_TREE_DATA || ',{"id":'||V_ST_ID_LEVEL1||',"text":"'||V_ST_NAME_LEVEL1||'","href":"f?p=APP_ID:'||V_ST_PAGE_LEVEL1||':SESSION_ID::NO:","leaf" : false, "cls" : "folder", "children" : [';
          V_LEVEL1_COUNTER := V_LEVEL1_COUNTER + 1;
       END IF;

     -- Load first record
    OPEN c_tree_level2;
    -- Fetch row
    FETCH c_tree_level2
      INTO V_ST_ID_LEVEL2, V_ST_NAME_LEVEL2, V_ST_PAGE_LEVEL2;
    LOOP
      EXIT WHEN c_tree_level2%NOTFOUND;
         IF V_LEVEL2_COUNTER IS NULL THEN
            V_TREE_DATA := V_TREE_DATA || '{"id":'||V_ST_ID_LEVEL2||',"text":"'||V_ST_NAME_LEVEL2||'","href":"f?p=APP_ID:'||V_ST_PAGE_LEVEL2||':SESSION_ID::NO:","leaf" : true, "cls" : "file"}';
            V_LEVEL2_COUNTER := 1;
         ELSE
            V_TREE_DATA := V_TREE_DATA || ',{"id":'||V_ST_ID_LEVEL2||',"text":"'||V_ST_NAME_LEVEL2||'","href":"f?p=APP_ID:'||V_ST_PAGE_LEVEL2||':SESSION_ID::NO:","leaf" : true, "cls" : "file"}';
            V_LEVEL2_COUNTER := V_LEVEL2_COUNTER + 1;
         END IF;
         FETCH c_tree_level2
           INTO V_ST_ID_LEVEL2, V_ST_NAME_LEVEL2, V_ST_PAGE_LEVEL2;
    END LOOP;

    V_TREE_DATA := V_TREE_DATA || ']}';
    CLOSE c_tree_level2;
    V_LEVEL2_COUNTER := '';

    FETCH c_tree_level1
      INTO V_ST_ID_LEVEL1, V_ST_NAME_LEVEL1, V_ST_PAGE_LEVEL1;
  END LOOP;

  V_TREE_DATA := V_TREE_DATA || ']';
  CLOSE c_tree_level1;

return(V_TREE_DATA);

-- On error/exception
EXCEPTION
   WHEN OTHERS THEN
      -- Fill variables with ORA errors
      v_err_num := SQLCODE;
      v_err_msg := SUBSTR(SQLERRM, 1, 100);
      -- Return error into json tree
      v_err_return := '{"text" : "' || v_err_num || '", "id" : 1000, "leaf" : false, "cls" : "folder", "children" :';
      v_err_return := v_err_return || '[ {"text" : "' || v_err_msg || '", "id" : "100000", "leaf" : true, "cls" : "file"}]}';
      return(v_err_return);
END;
-----------------------------------------------------------------------
end PKG_AAW;