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.
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.
11 comments:
I copied your post into my page and doesn't work fine, it doesn't make the layout that I wait.The pageContent region is not draw good and south still.I have only west panel with accordion menu.
I just did a cut and paste of the static page, and it all worked fine.
Did you follow the create a sub-directory in the examples folder and save the static file there?
If your updating your template, make sure all extjs scripts, css files and images are on the web-server.
Then you'll need to modify create a page template, and do the search and replace I mentioned.
I've tested it and it works.
Mark
When I put the two region (02,03) into west-div that's work fine!
By
Hi mark,
really you are doing a favor to the apex world, anyway I followed exactly your steps to create apex template. First I tried it as a static page but I got nothing, I mean I can see only a white page. I did create sub-dir in examples.I am using extjs 3.0.0 is it becuase of the release or I am missing something, please advice
Omar
Hi Omah
I'd say using 3.0 is probably the issue.
Given this post is nearly 2 years old, I'd suggest you look at the examples included with Ext 3.0, and adapt one of those.
The concepts are the same, the syntax may have changed a little.
Mark
Hi Mark,
thanks for your reply, actually I tried to do so, but there is extra .js and .css files related to specific examples, I don't want to add more overhead the apex pages. Could you please update your template.
thanks
Omar
hi mark,
is it possible that I have an export for your demo app. if so please
email me
omarsawalhah@yahoo.com
thanks
Sorry Omar
I don't give out exports of the app.
The intention of my demo is to educate and inform, so I don't release the source as this is simply giving a solution.
The Ext JS examples are fine to use, just find the closest one to what you want and strip out the bits you don't need.
Mark
Hi Mark,
Thanks a lot I do understand, need a favor to do, actually I am new to Ext JS, it may take sometime to change your template, but may do it within seconds, please try your template in release 3.0 and advice how to change it.
thanks
Omar
for version 3.0... begin with explicitly setting width and height in "myForm"
regards
wuulf
Really Thanks . it work fine :)
But how can i add region inside of specific frame ;when i add new region it was always created outside all frame .. Can you help on this plz ?
Mohanad Awad
Post a Comment