| |
/*
* 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);
});
|
|