This discussion is archived
0 Replies Latest reply: Mar 28, 2013 6:53 AM by Ahmed Alsaied RSS

Apex page template using ExtJS

Ahmed Alsaied Newbie
Currently Being Moderated
Dears ,
i use ext 3.4.0 with apex 4.2 i put this code in page template
----------------------Header-----------------------------
<html lang="&BROWSER_LANGUAGE.">
<head>
 <title>#TITLE#</title>
 <!-- standard stylesheets -->
 <link rel="stylesheet" type="text/css" href="/i/ext/3.4.0/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="/i/ext/3.4.0/adapter/ext/ext-base.js"></script>
 <script type="text/javascript" src="/i/ext/3.4.0/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# 
</head>
<body>
<form id="wwvFlowForm">
------------------------Body------------------------------
<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>
-----------------------Fotter-----------------------
</form>

  <div id="south">Some footer content here</div>
</body>
</html>
but the page is empty ... please what's the problem ?

Thanks

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points