PDA

View Full Version : ExtJS Tab Panel Issue



Maerio
24 Apr 2009, 1:01 AM
Hello,

i develop an Apex site, on which i want to implement an ExtJs Tab panel with 4 Tabs.
I followed the tutorial from http://oracleinsights.blogspot.com/2008/06/tabbed-regions-in-oracle-apex-using.html.
I thought it works fine, but now i have trouble after submit the page. The Apex items won't be saved correctly.

Debug Code without ExtJs Tab:

0.03: Session State: Save form items and p_arg_values
0.03: ...Session State: Save "P3510_ID" - saving same value: "3"
0.03: ...Session State: Save "P3510_ROW_FETCHED" - saving same value: "1"
0.03: ...Session State: Save "P3510_ADDRESSID" - saving same value: "146"
0.03: ...Session State: Save "P3510_ORIGINID" - saving same value: "7"
0.03: ...Session State: Save "P3510_TYPEID" - saving same value: "1"Debug Sample with ExtJs Tab:
0.03: Session State: Save form items and p_arg_values
0.03: ...Session State: Saved Item "P3510_ACTIVETAB" New Value="3"
0.03: ...Session State: Saved Item "P3510_ID" New Value="1"
0.03: ...Session State: Saved Item "P3510_ROW_FETCHED" New Value="146"
0.03: ...Session State: Saved Item "P3510_ADDRESSID" New Value="7"
0.03: ...Session State: Saved Item "P3510_ORIGINID" New Value="1"The item values are in the right order, but the apex items not.

My Page looks like ..

Page Html Header:

<script language="JavaScript" type="text/javascript">
Ext.onReady(function(){
var hiddenElement = document.getElementById('P3510_ACTIVETAB').value;
var activeTab = (hiddenElement == null || hiddenElement == '') ? 'panel1' : hiddenElement;

var tabs = new Ext.TabPanel({
cls: 'prism',
applyTo: 'TabPanel',
plain: true,
width: 1000,
height: 600,
//autoHeight:true,
enableTabScroll:true,
autoScroll:true,
activeTab: activeTab,
deferredRender: false,
border: true,
defaults: {layout:'fit', autoScroll:true},
items:[
{contentEl:'tab1',
id : 'panel1',
title:'test1'},
{contentEl:'tab2',
id : 'panel2',
title:'test2'},
{contentEl:'tab3',
id : 'panel3',
title:'test3'},
{contentEl:'tab4',
id : 'panel4',
title:'test4'}

]
});

var setActiveTab = function(pTab){
var get = new htmldb_Get(null,html_GetElement('pFlowId').value,null,3510);
get.add('P3510_ACTIVETAB',pTab);
var gReturn = get.get(null);
get = null;
};

tabs.on('tabchange',function(){
setActiveTab(this.getActiveTab().id);
});

});
</script>Region Template:

<div id="#REGION_STATIC_ID#" class="tab-content">
<div class="x-fieldset-bwrap" style="padding:10px">
<div align="right" class="x-fieldset-tbar">#CLOSE##PREVIOUS##NEXT##DELETE##EDIT##CHANGE##CREATE##CREATE2##EXPAND##COPY##HELP#</div>
<div class="x-fieldset-body">
#BODY#
</div>
</div>
</div>I hope someone can help me.

Thx
Mario