Hello,

i develop an Apex application, 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 (works):

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: (error)

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 tabs = new Ext.TabPanel({
           cls: 'prism',
           applyTo: 'TabPanel',
           plain: true,
           width: 1000,
           height: 600,
           //autoHeight:true,
           enableTabScroll:true,
           autoScroll:true,
           activeTab: 0,
           deferredRender: false,
           border: true,
           defaults: {layout:'fit', autoScroll:true},
           items:[
               {contentEl:'tab1', title:'test1'},
               {contentEl:'tab2', title:'test2'},
               {contentEl:'tab3', title:'test3'},
               {contentEl:'tab4', title:'test4'}
           ]
           });
    });
});
</script>

Region Template for each region with static ID:

<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

Hello Mark,

I use an Ext.Panel in an Ext.Window in APEX to show an APEX-region. The panel should be used as SearchQuery-Form.
But when I enter any search-keys in the text fields which are displayed in the ext.panel, the session of this text fields don't be saved after submitting the page.

At first I thought the reason is that the DOM-Tree is moved outside the APEX <form>-Tag when I open the panel. I added the parameter "allowDomMove:false" at the panel definition. But this parameter has no effect.

How can I save the state of these text fields on page submit?

Regards,
Michael

Hi Michael

I would suggest you put an example up on apex.oracle.com so we can look at what your doing.

If you follow my template and also look at my customized viewport you should have no problems.

Regards

Mark

Hi Michael

I've fixed your example, and changed the references to Extjs to use cachefly

The issue was you were not applying the window to an existing dom element, so Extjs was creating a new div at the end of your html body outside the form.

This is very easy to see the Firefox Web Developer addon and view the generated source.

Regards

Mark