Dojo内容窗格拆分器未显示

Question

我正在尝试使用dojo组件布局JavaScript Web Map，并希望将分割器添加到我的dojo内容窗格中。我的左窗格和中心窗格之间有一个工作但我无法在我的中心窗格和页脚之间显示该窗格。下面的代码是我试图添加拆分器的内容窗格页脚。我确信我错过了一些简单的事情，有没有人有任何建议？ 在此先感谢!!

 <div data-dojo-type="dojox.layout.ContentPane" splitter="true" region="bottom" id="footerAll"   style="height:60%; width:100%">
    <div id="footerDocNum" class="roundedCorners" dojotype="dojox.layout.ContentPane"  region="bottom"  style="height:90%; width:96%;display:none;">  

      <table dojotype="dojox.grid.DataGrid" data-dojo-id="grid1" id="grid1" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'">

            <thead>
                <tr>
                <th field='DOCUMENT_N' width='150px'>Document Number</th>
                <th field='SURVEYOR' width='150px'>Surveyor</th>
                <th field='TOWNSHIP_R' width='150px'>Township/Range</th>
                <th field='SECTION' width='100px'>Section</th>
                <th fields="page_id" formatter="makeLink3"width="100px" > 
              PDF
            </th>

            </thead>
      </table>
    </div>
    <div id="footerCity" class="roundedCorners" dojotype="dijit.layout.ContentPane"  region="bottom"  style="height:90%; width:96%; display:none"> 

      <table dojotype="dojox.grid.DataGrid" data-dojo-id="grid2" id="grid2" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'">


        <thead>
          <tr>          
           <th field="CITY"  width="200px"  > 
            City  
           </th> 
            <th field="Square_Mil" width="150px"  > 
              Square Miles
            </th> 
            </tr> 
        </thead>
      </table>
    </div>  

    <div id="footerPoints" class="roundedCorners" dojotype="dijit.layout.ContentPane"  region="bottom"  style="height:90%; width:96%; display:none;"> 

      <table dojotype="dojox.grid.DataGrid" data-dojo-id="grid4" id="grid4" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'"> 
   <td>  <tr>    
     <form name="griddataControl" id="gridDataFormControl" action="resultsControl.cfm" target="_blank" method="post" style="display:none"><input id="gridDataTextControl" name="gridDataTextControl" type="hidden"><input type="hidden"></form>
      <button dojoType="dijit.form.Button" value="Export Results" onclick="document.forms['gridDataFormControl'].submit();">Export To Excel</button><b>Monument Results</b></tr></td>

        <thead>
          <tr>  

           <th field="POINT_NAME"  width="150px"  > 
            Point Name 
           </th> 
            <th field="GRID_ADDRE" width="150px"  > 
              Address
            </th> 
            <th field='TOWNSHIP_R' width='150px'>Township/Range</th>
            <th field="SECTION" width="100px" > 
             Section 
            </th> 
            <th fields="POINT_NAME,LONGITUDE,LATITUDE" formatter="makeLink1" width="150px" > 
              Mon. Ref. Sheet
            </th>
            <th field="MON_NOTES" width="150px" > 
              Monument Notes
            </th> 
            </tr>
        </thead>
      </table>
    </div>  
    <div id="footersurvName" class="roundedCorners" dojotype="dijit.layout.ContentPane"  region="bottom"  style="height:90%; width:96%; display:none;"> 

      <table dojotype="dojox.grid.DataGrid" data-dojo-id="grid5" id="grid5" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'"> 

    <form name="griddata" id="gridDataForm" action="results.cfm" target="_blank" method="post" style="display:none"><input id="gridDataText" name="gridDataText" type="hidden"><input type="hidden"></form>
       <tr><button dojoType="dijit.form.Button" value="Export Results" onclick="document.forms['gridDataForm'].submit();">Export To Excel</button><b>Survey Results</b></tr>
        <thead>
            <tr>
            <th field="page_description"  width="150px" > 
              Survey Number
            </th> 


           <th field="SURVEYOR"  width="150px"  > 
            Surveyor 
           </th> 
            <th field="ADDRESS_OF_SURVEY" width="200px"  > 
              Address
            </th> 
            <th field='TOWNSHIP_RANGE' width='150px'>
            Township/Range
            </th>
            <th field="SECTION" width="100px" > 
             Section 
            </th> 
            <th fields="subdir,page_id" formatter="makeLink" width="75px" > 
              PDF
            </th>

          </tr> 
        </thead>
      </table>
    </div>  
    <div id="footerSection" class="roundedCorners" dojotype="dijit.layout.ContentPane"  region="bottom"  style=" height:90%; width:96%; display:none;"> 

      <table dojotype="dojox.grid.DataGrid" data-dojo-id="grid7" id="grid7" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'"> 

        <thead>
          <tr>          

            <th field='TOWN_RANGE' width='150px'>
            Township/Range</th>
            <th field="Section_Nu" width="150px" > 
             Section 
            </th> 

          </tr> 
        </thead>
      </table>
    </div>  
     </div>