Load APEX-AT-WORK Examples...
 Category root
 APEX solutions
 Browser information
 CSS in region title
 Checkbox search for IRR
 Dynamic region title
 Flash movie in APEX
 IR with dynamic rules
 Line breaks (CRLF) in textareas
 Outlook calender in APEX region
 Radio group with help text
 Regions in the same size (width)
 Set up column width in a report
 ExtJS integration
 ExtJS enhanced layout source
 ExtJS grids
 ExtJS read-only grid
 ExtJS updateable grid
 ExtJS item help
 ExtJS theme switcher for APEX
 ExtJS trees
 ExtJS navigation tree - Version 1
 ExtJS navigation tree - Version 2
 ExtJS tree examples
 ExtJS window integrated into a region template
 Installation & Layout integration
 Integrate IRs into one ExtJS page
 Websites around APEX and ExtJS
 ExtJS layout with APEX examples
 Dynamic Flash Chart
 Example page
 PONG © Joe Nesbella
 PONG © mclelun.com
 Install, Config and Deinstall guide

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:
Debug values     
   
   
Page template     
  Create a new page template
Use the following source: Template of page 36

Create a new javascript file with the following source and upload it as extjs_js_template_page36.js.

 
   
Javascript template (1/2)     
 
/*
 * 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

   // loading mask for startup period, when all elements get loaded
	   setTimeout(function(){
		 Ext.get('loading').remove();
		 Ext.get('loading-mask').fadeOut({remove:true});
	   }, 250);

   // 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
TreeRequest = new htmldb_Get(null,'65555','APPLICATION_PROCESS=AP_P36_GET_TREE_DATA',0);

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

//Check if there is a response
if (TreeResponse) {
   // set variable to RETURN string
   $x("P36_JSON_RETURN_STRING").value = TreeResponse;
   //alert(TreeResponse);

   // create json object
   var v_db_tree_data= TreeResponse.parseJSON();

   // set json object to apex item
   $x('P36_RETURN_FIRST_VALUE').value =  v_db_tree_data[0].text;

   // Tests
   // var v_db_tree_data=TreeResponse; // lists as a string
   // var v_db_tree_data=eval('(' + TreeResponse + ')');
   // var v_db_tree_data= eval("(" + TreeResponse + ")");
   // alert(v_db_tree_data);
   // JSON.parse(TreeResponse,reviver);
     }

// -------------------------------------------------------------------------------------------------------- //
// ExtJS local tree data - Create JSON object                                                               //
// -------------------------------------------------------------------------------------------------------- //
// local json data for ext tree
var v_local_tree_data = [
{"text" : "Audi", "id" : 100, "leaf" : false, "cls" : "folder", "children" : [
{"text" : "A3", "id" : 1000, "leaf" : false, "cls" : "folder", "children" :
[ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
{"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
{"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
{"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
{"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
]
},
{"text" : "A4", "id" : 2000, "leaf" : false, "cls" : "folder", "children" :
[ {"text" : "Fuel Economy", "id" : "200000", "leaf" : true, "cls" : "file"},
{"text" : "Invoice", "id" : "200001", "leaf" : true, "cls" : "file"},
{"text" : "MSRP", "id" : "200002", "leaf" : true, "cls" : "file"},
{"text" : "Options", "id" : "200003", "leaf" : true, "cls" : "file"},
{"text" : "Specifications", "id" : "200004", "leaf" : true, "cls" : "file"}
]
}
]}
];


/*
	var NavTree = Ext.tree;

	var tree = new NavTree.TreePanel('tree', {
	    el: 'region_extjs_tree',
		title:'Navigation - ExtJS tree',
		autoScroll:true,
                border: false,
		layout: 'fit',
        animate:true,
        enableDD:false,
	    loader: new NavTree.TreeLoader(), // Note: no dataurl, register a TreeLoader to make use of createNode()
	    lines: true,
	    selModel: new Ext.tree.MultiSelectionModel(),
        containerScroll: false
    });

	// set the root node
	var root = new NavTree.AsyncTreeNode({
        text: 'Pages',
        draggable:false,
        id:'source',
        children: v_json_tree_data
    });

    tree.setRootNode(root);

    tree.render();
    root.expand();
*/
 
   
Javascript template (2/2)     
 
/*
// -------------------------------------------------------------------------------------------------------- //
// 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_with_json',
		title:'ExtJS tree (with local data)',
		autoScroll:true,
        border: false,
		layout: 'fit',
		items:new Ext.tree.TreePanel({
                 loader:new Ext.tree.TreeLoader()
				 ,enableDD:false
                 ,autoScroll: true
				 ,selModel: new Ext.tree.MultiSelectionModel()
                 ,root:new Ext.tree.AsyncTreeNode({
                   //leaf:false
                  //,loaded:false
				  id:'source1'
                  ,expanded:true
                  ,text:'Tree Root'
                  ,children:v_local_tree_data
            })
        })
		},{
		contentEl: 'region_extjs_tree_with_db',
		title:'ExtJS tree (with application process data)',
		autoScroll:true,
        border: false,
		layout: 'fit',
		items:new Ext.tree.TreePanel({
                 loader:new Ext.tree.TreeLoader()
				 ,enableDD:false
                 ,autoScroll: true
				 ,selModel: new Ext.tree.MultiSelectionModel()
                 ,root:new Ext.tree.AsyncTreeNode({
                   //leaf:false
                  //,loaded:false
				  id:'source2'
                  ,expanded:true
                  ,text:'Tree Root'
                  ,children:v_db_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                                                                                       //
// -------------------------------------------------------------------------------------------------------- //

    /*
	The Viewport renders itself to the wwvFlowForm element, and automatically sizes itself to the size of
	* the browser viewport and manages window resizing. There may only be one Viewport created
	* in a page. Inner layouts are available by virtue of the fact that all {@link Ext.Panel Panel}s
	* added to the Viewport, either through its {@link #items}, or through the items, or the {@link #add}
	* method of any of its child Panels may themselves have a layout.

	*

	The Viewport does not provide scrolling, so child Panels within the Viewport should provide
	* for scrolling if needed using the {@link #autoScroll} config.

	* By default, when applyTo is not specified, the Viewport renders itself to the document body.
	*/
	Ext.ux.FormViewport = Ext.extend(Ext.Container, {
	/*
	* cfg {Mixed} applyTo
	* The id of the node, a DOM node or an existing Element that is already present in
	* the document that specifies some panel-specific structural markup.By default, when applyTo is not
	* specified, the Viewport renders itself to the document body.
	*/
	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();
});
 
   
Application process     
  Application process settings:
Process Point: On Demand
Name: AP_P36_GET_TREE_DATA
Type: PL/SQL Anonymous Block

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


-- Variables for JSON TREE DATA
   V_TREE_DATA              VARCHAR2(3000);

BEGIN
-- set text
V_TREE_DATA := '[{"text" : "Audi", "id" : 100, "leaf" : false, "cls" : "folder", "children" : [';
V_TREE_DATA :=  V_TREE_DATA || '{"text" : "A3", "id" : 1000, "leaf" : false, "cls" : "folder", "children" :';
V_TREE_DATA :=  V_TREE_DATA || '[ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},';
V_TREE_DATA :=  V_TREE_DATA || '{"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},';
V_TREE_DATA :=  V_TREE_DATA || '{"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},';
V_TREE_DATA :=  V_TREE_DATA || '{"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},';
V_TREE_DATA :=  V_TREE_DATA || '{"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}';
V_TREE_DATA :=  V_TREE_DATA || ']';
V_TREE_DATA :=	V_TREE_DATA || '},';
V_TREE_DATA :=	V_TREE_DATA || '{"text" : "A4", "id" : 2000, "leaf" : false, "cls" : "folder", "children" :';
V_TREE_DATA :=	V_TREE_DATA || '[ {"text" : "Fuel Economy", "id" : "200000", "leaf" : true, "cls" : "file"},';
V_TREE_DATA :=	V_TREE_DATA || '{"text" : "Invoice", "id" : "200001", "leaf" : true, "cls" : "file"},';
V_TREE_DATA :=	V_TREE_DATA || '{"text" : "MSRP", "id" : "200002", "leaf" : true, "cls" : "file"},';
V_TREE_DATA :=	V_TREE_DATA || '{"text" : "Options", "id" : "200003", "leaf" : true, "cls" : "file"},';
V_TREE_DATA :=	V_TREE_DATA || '{"text" : "Specifications", "id" : "200004", "leaf" : true, "cls" : "file"}';
V_TREE_DATA :=	V_TREE_DATA || ']';
V_TREE_DATA :=	V_TREE_DATA || '}';
V_TREE_DATA :=	V_TREE_DATA || ']}]';
HTP.prn (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"}]}';
      HTP.prn (V_TREE_DATA);
END;
 
   
Sources
Rutger de Ruiter created a great example for the usage of JSON in APEX:
Rutger de Ruiter - Update multiple items from a LOV field with JSON

Mark Lancaster made already a how to about using Ext trees in APEX:
Mark Lancaster - Tree List Using ExtJS

An ExtJS forum post discussed the usage of JSON data in ExtJS trees (I used their example data):
ExtJS forum - Creating Ext.tree.TreePanel from static JSON data in one shot

Another example from Saki about the ExtJS trees:
Saki - Ext.ux.tree.CheckTreePanel by Saki - ver.: 1.0

Your are logged in as user: APEX_PUBLIC_USER