页面布局的问题

sd_tz_123

这个页面设这样布局的
<div id="layout1" class="mini-layout" style="width:100%;height:100%;">  
  <div title="center" region="center" bodyStyle="overflow:hidden;">
      <div title="center" region="center" bodyStyle="overflow:hidden;">      
        <div class="mini-toolbar" style="padding:2px;border:0;">
           <table style="width:100%;">
               <tr>
               <td style="width:100%;">
               <!--
                    <span style="margin-left:5px;">
        <a class="mini-button" iconCls="icon-search" plain="true">查看</a>
               <span class="separator"></span>            
           <a class="mini-button" iconCls="icon-edit" plain="true" >回访</a>
             </span>
                   <span class="separator"></span>
                    -->
                   <a class="mini-button" iconCls="icon-reload" plain="true">刷新</a>
                      <span class="separator"></span>
               <a class="mini-button" iconCls="icon-search" plain="true" >维修单</a>
               </td>
               <td style="white-space:nowrap;"><label style="font-family:Verdana;">报修日期</label>
                   <input id="tellservdate_start" name="tellservdate_start" class="mini-datepicker" format="yyyy-MM-dd " required="true"/>至
                   <input id="tellservdate_end" name="tellservdate_end" class="mini-datepicker" format="yyyy-MM-dd " required="true"/>                  
              </td>
              <td style="white-space:nowrap;"><label style="font-family:Verdana;">项目</label>
                   <input id="pk_project" name="pk_project" class="mini-buttonedit" />                 
              </td>
                <td style="white-space:nowrap;"><label style="font-family:Verdana;">单据编号</label>
                   <input id="maintaincode" name="maintaincode"  class="mini-textbox" />                 
              </td>
           </tr>
         </table>
       </div>
   
       <!--撑满页面style="overflow-y:auto;height:400px;width:100%;white-space:nowrap"-->
       <div class="mini-fit" style="overflow-y:auto;height:600px;width:100%;white-space:nowrap">
        <fieldset style="border:solid 1px #aaa;padding:3px;">
              <legend>未回访单据</legend>
        <div id="datagrid1" class="mini-datagrid"  allowResize="true" style="overflow-y:auto;height:250px;width:100%;"
            url="/miniservice/service/mn.bs.framework.servlet.maintenance.QueryAction?finishstatus=isvisit-N&pk_prepared=<%=pk_prepared %> " idField="id">
            <div property="columns">
                <div name="action"  headerAlign="center" align="center" renderer="onActionRenderer" cellStyle="padding:0;">#</div>     
                 <div field="requestcategory"  headerAlign="center">报修类别</div>
                <div field="maintaincode"  headerAlign="center">维修单编号</div>   
                <div field="project_name"   headerAlign="center" >项目名称</div>
                <div field="housename"  headerAlign="center">报修地址</div>   
                <div field="tellservdate"  headerAlign="center" dateFormat="yyyy-MM-dd H:mm">报修日期</div>
                <div field="reportpeople"  headerAlign="center">报修人</div>                 
                <div field="servcontent"  headerAlign="center" >维修内容</div>
                <div field="finishstatus"  headerAlign="center">完成状态</div>
                <div name="maintainid" field="maintainid" >主键</div>              
            </div>
        </div>
       </fieldset>
       <fieldset style="border:solid 1px #aaa;padding:3px;">
              <legend>最新未分配单据</legend>
        <div id="datagrid2" class="mini-datagrid"  allowResize="true" style="overflow-y:auto;height:249px;width:100%;"
            url="/miniservice/service/mn.bs.framework.servlet.maintenance.QueryAction?finishstatus=isvisit-init"  idField="id">
            <div property="columns">
                <!--<div type="indexcolumn"></div>        -->
                <div name="action"  headerAlign="center" align="center" renderer="onInitActionRenderer" cellStyle="padding:0;">#</div>   
               <div field="requestcategory"  headerAlign="center">报修类别</div>
               <div field="maintaincode"  headerAlign="center">维修单编号</div>  
                <div field="project_name"   headerAlign="center" >项目名称</div>   
                <div field="housename"  headerAlign="center">报修地址</div>   
                <div field="tellservdate"  headerAlign="center" dateFormat="yyyy-MM-dd H:mm">报修日期</div>
                <div field="reportpeople"  headerAlign="center">报修人</div>                 
                <div field="servcontent"  headerAlign="center" >维修内容</div>
                <div field="finishstatus"  headerAlign="center">完成状态</div>
                <div name="maintainid" field="maintainid" >主键</div>              
            </div>
        </div>
       </fieldset>
      </div>
      </div>
   </div>
   </div>
   我想让最新未分配单据根据屏幕大小撑满界面，现在的情况是最新未分配单据下面有一片空白

factory

直接在你想要撑满的那个控件外面增加一个<div class="mini-fit"></div>
mini-fit是可以让高度自适应,不过前提是fit控件的外层需要有一个高度

sd_tz_123

factory 发表于 2012-11-6 16:19
直接在你想要撑满的那个控件外面增加一个
mini-fit是可以让高度自适应,不过前提是fit控件的外层需要有一个 ...

<div class="mini-fit" style="overflow-y:auto;height:600px;width:100%;white-space:nowrap">
<fieldset style="border:solid 1px #aaa;padding:3px;">
</fieldset>
<fieldset style="border:solid 1px #aaa;padding:3px;">
</fieldset >
</div>
象这段代码，第二个fieldset 撑满界面，在它上面加可以吗

factory

sd_tz_123 发表于 2012-11-6 16:36
象这段代码，第二个fieldset 撑满界面，在它上面加可以吗

fit就是撑满剩余的高度,你可以参考示例:
http://miniui.com/demo/datagrid/fitsize.html
看下他的代码

sd_tz_123

factory 发表于 2012-11-6 16:40
fit就是撑满剩余的高度,你可以参考示例:
http://miniui.com/demo/datagrid/fitsize.html
看下他的代码 ...

我看了，可我不知道怎么放到我这里面，不会举一反三，求指点

factory

sd_tz_123 发表于 2012-11-6 16:54
我看了，可我不知道怎么放到我这里面，不会举一反三，求指点

比如你的页面有3块区域,上中下,上面高度50px,下面高度60px,中间的div需要自动撑满高度,那么就在这个div外面放一个<div class = "mini-fit">需要自动撑满的div</div>就可以了

sd_tz_123

factory 发表于 2012-11-6 17:00
比如你的页面有3块区域,上中下,上面高度50px,下面高度60px,中间的div需要自动撑满高度,那么就在这个div外 ...

这个意思我明白了，可是放到我的里面，不知道该怎么做

factory

sd_tz_123 发表于 2012-11-6 17:12
这个意思我明白了，可是放到我的里面，不知道该怎么做

你的代码里面外层的layout 还有 2个title=center是完全不需要的,把这3个div全部删除掉,你只是需要做上面一个toolbar,下面2个表格.
你的表格的高度不要设置固定值,设成100%,把表格的那固定高度值设置到fieldset上去,或者一个fieldsetd固定值,一个fieldset 100%.然后再把fit放到那个100%的fieldset外层上.

sd_tz_123

factory 发表于 2012-11-6 17:43
你的代码里面外层的layout 还有 2个title=center是完全不需要的,把这3个div全部删除掉,你只是需要做上面 ...

但是有一点想再请教下，我如果把第2个fieldset设置100% fit放在这上面，但是fit必须给个固定高度不是，我这个固定高度想根据屏幕大小分辨率大小动态变换，这段代码怎么写，我知道用屏幕大小-toolbar的高度-第一个fieldset的高度，可是我不知道怎么取toolbar的高度，和屏幕高度，还有什么好的解决方法吗？

factory

sd_tz_123 发表于 2012-11-7 12:52
但是有一点想再请教下，我如果把第2个fieldset设置100% fit放在这上面，但是fit必须给个固定高度不是，我 ...

fit是自动根据你所剩余的高度计算出高度的,所以你不需要给fit高度