页面布局的问题

sd_tz_123

factory 发表于 2012-11-7 14:12
fit是自动根据你所剩余的高度计算出高度的,所以你不需要给fit高度

如果界面是mini-tabs界面想让这个tabs界面撑满界面，需要给fit设置固定高度吗，如果tabs里面的界面是刚才那个界面的话

factory

sd_tz_123 发表于 2012-11-7 14:29
如果界面是mini-tabs界面想让这个tabs界面撑满界面，需要给fit设置固定高度吗，如果tabs里面的界面是刚才 ...

首先mini-fit需要使用的地方在于,自动撑满剩余高度.
如果页面只是一个控件,比如你的mini-tabs,那么直接设置tabs的styel="height:100%;"就可以了.不过前提是你的外层元素要有高度,例如body的高度要为100%;
body,html{
   height:100%;
   width:100%;
   padding:0;marging:0;
}

sd_tz_123

factory 发表于 2012-11-7 15:27
首先mini-fit需要使用的地方在于,自动撑满剩余高度.
如果页面只是一个控件,比如你的mini-tabs,那么直接设 ...

可是事实并非如此
  <style type="text/css">
    html, body
    {
        padding:0;border:0;margin:0;
        width:100%;height:100%;overflow:hidden;
        font-family:Verdana;
        font-size:12px;   
        line-height:22px;
    }  
    </style>
<div class="mini-fit">
<center>呼叫中心管理界面</center>
<div id="tabs1" class="mini-tabs" activeIndex="0" style="width:100%;height:100%;" >      
     <div title="维修资料" url="./maintenancesrv/browmaintenancetable.jsp?pk_prepared=<%=pk_prepared %>" refreshOnClick="false">        
     </div>
     <div title="投诉资料" url="./complain/browcomplaintable.jsp?pk_prepared=<%=pk_prepared %>" refreshOnClick="false">        
     </div>
     <div title="维修事件" url="./res_client/clienteventbill.jsp" refreshOnClick="false">        
     </div>
      <div title="呼入呼出查询" url="./ref/gotophoneevent.jsp" refreshOnClick="false">        
     </div>
       <div title="未完成工单调查" url="./maintenancesrv/unvistmaintenance.jsp?"refreshOnClick="false">        
     </div>
</div>
</div>
可是界面却出现只有这点界面下面界面就是空白，你必须得给个固定高度才可以，不然的话界面并非撑满，而这个固定高度的设置也是死的，可是想动态控制不会

factory

sd_tz_123 发表于 2012-11-7 16:33
可是事实并非如此
  
    html, body

1. <div class="mini-panel"  style="width:100%;height:100%;" showToolbar="true"  showFooter="true" showHeader="false" footerStyle="background-color:Transparent;" headerStyle="background-color:Transparent;">
   
2.     <!--toolbar-->
   
3.     <div property="toolbar" >
   
4.            <table style="width:100%;">
   
5.                <tr>
   
6.                <td style="width:100%;">
   
7.                <!--
   
8.                     <span style="margin-left:5px;">
   
9.         <a class="mini-button" iconCls="icon-search" plain="true">查看</a>
   
10.                <span class="separator"></span>            
    
11.            <a class="mini-button" iconCls="icon-edit" plain="true" >回访</a>
    
12.              </span>
    
13.                    <span class="separator"></span>
    
14.                     -->
    
15.                    <a class="mini-button" iconCls="icon-reload" plain="true">刷新</a>
    
16.                       <span class="separator"></span>
    
17.                <a class="mini-button" iconCls="icon-search" plain="true" >维修单</a>
    
18.                </td>
    
19.                <td style="white-space:nowrap;"><label style="font-family:Verdana;">报修日期</label>
    
20.                    <input id="tellservdate_start" name="tellservdate_start" class="mini-datepicker" format="yyyy-MM-dd " required="true"/>至
    
21.                    <input id="tellservdate_end" name="tellservdate_end" class="mini-datepicker" format="yyyy-MM-dd " required="true"/>                  
    
22.               </td>
    
23.               <td style="white-space:nowrap;"><label style="font-family:Verdana;">项目</label>
    
24.                    <input id="pk_project" name="pk_project" class="mini-buttonedit" />                 
    
25.               </td>
    
26.                 <td style="white-space:nowrap;"><label style="font-family:Verdana;">单据编号</label>
    
27.                    <input id="maintaincode" name="maintaincode"  class="mini-textbox" />                 
    
28.               </td>
    
29.            </tr>
    
30.          </table>
    
31.     </div>
    
32.    
    
33.     <fieldset style="border:solid 1px #aaa;padding:3px;">
    
34.               <legend>未回访单据</legend>
    
35.         <div id="datagrid1" class="mini-datagrid"  allowResize="true" style="overflow-y:auto;height:250px;width:100%;"
    
36.             url="/miniservice/service/mn.bs.framework.servlet.maintenance.QueryAction?finishstatus=isvisit-N&pk_prepared=<%=pk_prepared %> " idField="id">
    
37.             <div property="columns">
    
38.                 <div name="action"  headerAlign="center" align="center" renderer="onActionRenderer" cellStyle="padding:0;">#</div>     
    
39.                  <div field="requestcategory"  headerAlign="center">报修类别</div>
    
40.                 <div field="maintaincode"  headerAlign="center">维修单编号</div>   
    
41.                 <div field="project_name"   headerAlign="center" >项目名称</div>
    
42.                 <div field="housename"  headerAlign="center">报修地址</div>   
    
43.                 <div field="tellservdate"  headerAlign="center" dateFormat="yyyy-MM-dd H:mm">报修日期</div>
    
44.                 <div field="reportpeople"  headerAlign="center">报修人</div>                 
    
45.                 <div field="servcontent"  headerAlign="center" >维修内容</div>
    
46.                 <div field="finishstatus"  headerAlign="center">完成状态</div>
    
47.                 <div name="maintainid" field="maintainid" >主键</div>              
    
48.             </div>
    
49.         </div>
    
50.        </fieldset>
    
51.       
    
52.        <!--footer-->
    
53.     <div property="footer" >
    
54.         <fieldset style="border:solid 1px #aaa;padding:3px;">
    
55.               <legend>最新未分配单据</legend>
    
56.         <div id="datagrid2" class="mini-datagrid"  allowResize="true" style="overflow-y:auto;height:249px;width:100%;"
    
57.             url="/miniservice/service/mn.bs.framework.servlet.maintenance.QueryAction?finishstatus=isvisit-init"  idField="id">
    
58.             <div property="columns">
    
59.                 <!--<div type="indexcolumn"></div>        -->
    
60.                 <div name="action"  headerAlign="center" align="center" renderer="onInitActionRenderer" cellStyle="padding:0;">#</div>   
    
61.                <div field="requestcategory"  headerAlign="center">报修类别</div>
    
62.                <div field="maintaincode"  headerAlign="center">维修单编号</div>  
    
63.                 <div field="project_name"   headerAlign="center" >项目名称</div>   
    
64.                 <div field="housename"  headerAlign="center">报修地址</div>   
    
65.                 <div field="tellservdate"  headerAlign="center" dateFormat="yyyy-MM-dd H:mm">报修日期</div>
    
66.                 <div field="reportpeople"  headerAlign="center">报修人</div>                 
    
67.                 <div field="servcontent"  headerAlign="center" >维修内容</div>
    
68.                 <div field="finishstatus"  headerAlign="center">完成状态</div>
    
69.                 <div name="maintainid" field="maintainid" >主键</div>              
    
70.             </div>
    
71.         </div>
    
72.        </fieldset>
    
73.     </div>
    
74. 
    
75. </div>

复制代码

你的代码我给你修改了下,不要用fit,直接用panel布局.
panel分toolbar,body,和footer 上中下三部分,你把你的toolbar,未回访单据,最新未分配单据分别放到三块区域里面好了.
布局这样来跟你说:
1.上下结构的,可以用 panel,Splitter的上下布局
2.左右结构的,可以用Splitter的左右布局.
3.fit一般只是用于局部的想撑满剩余高度.
4.layout一般用于整体界面的布局,当然也可以处理上下左右的结构布局,隐藏掉多余的region=""就可以了
5.还有就是用html原生的一些方式布局,比如html的table.还有就是用CSS的样式来控制,比如float:left/right....等等

sd_tz_123

factory 发表于 2012-11-7 17:07
你的代码我给你修改了下,不要用fit,直接用panel布局.
panel分toolbar,body,和footer 上中下三部分,你把你 ...

factory太给力了，非常感谢，纠结我这么多天的问题总算解决了