0 Replies Latest reply: Mar 28, 2013 8:53 AM by Ahmed Alsaied RSS

    Apex page template using ExtJS

    Ahmed Alsaied
      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