Following on from my earlier post on
integrating ExtJS we will now build a complete page template.
This template will contain:
- a "north" region containing a logo, title, navigation bar and show current user
- a "west" region containing 2 sub-regions navigation and settings
- a "center" region containing dynamic page content
- a "south" region for footer elements, e.g. copyright notices, links etc.
When prototyping its often easier to build using static html pages, and then load it into Oracle Apex.
Create a sub-directory in the /ext-2.0.1/examples/ directory. I've called mine "playpen", but it really doesn't matter.
Save the following text as a html file into the directory, e.g. "apex layout.html".
<html lang="&BROWSER_LANGUAGE.">
<head>
<title>#TITLE#</title>
<!-- standard stylesheets -->
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- this style forces form to fit screen height -->
<style type="text/css">
#wwvFlowForm {width:100%; height:100%;}
</style>
<!-- Ext scripts -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<!-- application configuration -->
<!-- eventually move "application" script to an external file -->
<script type="text/javascript">
Ext.onReady(function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var myForm = new Ext.Panel({
applyTo:'wwvFlowForm',
layout:'border',
items:[
new Ext.BoxComponent({ // raw
region:'north',
el: 'north',
height:45
}),
new Ext.BoxComponent({ // raw
region:'south',
el: 'south',
height:32
}),
{
region:'west',
id:'west-panel',
title:'West',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
layout:'accordion',
layoutConfig:{
animate:true
},
items: [{
contentEl: 'region_position_02',
title:'Navigation',
autoScroll:true,
border:false
},{
contentEl: 'region_position_03',
title:'Settings',
autoScroll:true,
border:false
}]
},{
region:'center',
contentEl:'pageContent',
layout:'column',
autoScroll:true
}]
});
myForm.doLayout();
});
</script>
</head>
<body>
<form id="wwvFlowForm">
<!-- -------------------------------------BODY SECTION start------------------------------------- -->
<div id="north">
<table cellpadding="0" cellspacing="0" border="0" width="100%" height="45px">
<tr>
<td valign="top">#LOGO#</td>
<td align="center"><span style="{ }">Integrating ExtJS javascript library with Oracle Application Express</span></td>
<td width="300px" align="right" border="0" style="padding-right:5px">
<div style="height:20px">&USER.</div>
<div id="navigation_bar">#NAVIGATION_BAR#</div>
</td>
</tr>
</table>
</div>
<div id="west"></div>
<div id="region_position_02">#REGION_POSITION_02#</div>
<div id="region_position_03">#REGION_POSITION_03#</div>
<div id="pageContent">
<div id="region_position_01">#REGION_POSITION_01#</div>
<div id="messages" align="center">#GLOBAL_NOTIFICATION##NOTIFICATION_MESSAGE##SUCCESS_MESSAGE#</div>
<div id="region_box_body">#BOX_BODY#</div>
<div id="region_position_04">#REGION_POSITION_04#</div>
<div id="region_position_05">#REGION_POSITION_05#</div>
<div id="region_position_06">#REGION_POSITION_06#</div>
<div id="region_position_07">#REGION_POSITION_07#</div>
<div id="customize">#CUSTOMIZE#</div>
<div id="region_position_08">#REGION_POSITION_08#</div>
</div>
<!-- -------------------------------------BODY SECTION end------------------------------------- -->
</form>
<div id="south">Some footer content here</div>
</body>
</html>
Open it in your browser and you should see something like this:
Note the "West" panel expands and collapses and is resizable, and the navigation panel is also functional. Resize the width of the West panel, then refresh the page.
Did you notice it kept the new width?
This is all managed by a single line of code:
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
The panels that make up the page are stateful and remember position, provided a cookie has been registered. Users typically don't even notice unless you point it out to them.
Spend a bit of time looking at the script used to build the layout, consult the ExtJS doco etc.
OK, to make this an Oracle Apex template do the following:
Do a search and replace:
</form> becomes #FORM_CLOSE#
Adjust the path of the javascript and css file links, so if you followed my previous post:
../../becomes /i/themes/ext-2.0.1/
Copy and paste the content into a page template using header, body and footer regions.
The html already contains comments identifying where to cut.
Whip up a quick page to test it out, and barring any mistakes it should work just like the static version.
Enjoy.
Check out the ExtJS Grid with Pagination on my demo site
