panel收缩后高度是否变化的问题

1376651290

panel收缩后，我发现panel把body区域收缩在上半部，原来panel-body占用的高度没有变化，能否是panel往下收缩并且是panel占用的高度变成收缩后的高度。

1376651290

如图，有A、B区域，高度分别占比65%，35%，点击b区域Panel收缩后，使b区域panel高占比10%，显示收缩后样式，A占比90%
代码是这样的

1. function RemarkOnclick(e){
   
2.              
   
3.             var panel=e.sender;
   
4.                 var isExpanded =panel.getExpanded();
   
5.                
   
6.               if(isExpanded){                     
   
7.                       $("#leftuppanel").css("height","90%");   
   
8.              
   
9.                       $("#remarkArea").css("height","10%");
   
10.                      
    
11.                       $("#remarkpanel").css("position","absolute");
    
12.                       $("#remarkpanel").css("bottom","20px");
    
13.               }else{
    
14.             
    
15.                       document.getElementById("leftuppanel").style.height="65%";
    
16.                       tree.load("${path}/MaterialObject/queryCatalog");
    
17.                       document.getElementById("remarkArea").style.height="35%";
    
18.               }
    
19.       }

复制代码

felt

1376651290 发表于 2016-9-29 12:02
如图，有A、B区域，高度分别占比65%，35%，点击b区域Panel收缩后，使b区域panel高占比10%，显示收缩后样式 ...

1. <div style="width:400px;height:500px;border:1px solid red" >
   
2.                <div class="mini-fit">
   
3.                       <div class="mini-tree" style="width:100%;height:100%" url="../data/listTree.txt"                resultAsTree="false"></div>
   
4.                </div>
   
5.                <div class="mini-panel" style="width:100%;height:35%" showCollapseButton="true"               onbuttonclick="onButtonClick">
   
6.                      
   
7.                </div>
   
8.    
   
9. </div>

复制代码

function onButtonClick(e) {
        setTimeout(function () {
            mini.layout();
        }, 100)
    }

1376651290

@felt
版主

1. <div size="25%" showCollapseButton="true" >
   
2.             <div id="leftuppanel" style="width:100%;height:100%;">
   
3.                 <div id="lefttoptoolbar" class="mini-toolbar" style="width:100%;float:left;">
   
4.                                                         <input id="txtTreeSearch" class="mini-textbox" emptyText="请输入分类名称..."
   
5.                                                                 onenter="onTreeSearchKeyEnter" width="60%"/>
   
6.                                                         <a class="mini-button" iconCls="icon-query" plain="true" width="30%"
   
7.                                                                 onclick="treesearch()">查询</a>
   
8.                         </div>
   
9.                         <!-- 左侧实物目录树 -->
   
10.                         <div id="treediv" class="mini-fit" >
    
11.                                 <ul id="xmTree" class="mini-tree" url="${path}/MaterialObject/queryCatalog"
    
12.                                         style="width: 100%; height: 100%;" showTreeIcon="true"
    
13.                                         allowDrag="false" allowDrop="false" showExpandButtons="true"
    
14.                                         resultAsTree="false" expandOnLoad="true" onload="treeOnload"
    
15.                                         onnodeselect="onNodeSelect">
    
16.                                 </ul>
    
17.                         </div>
    
18.                         <!-- 左侧datagrid：被退回实物分类datagrid -->
    
19.                          <div id="thdatagrid" class="mini-datagrid" style="width:100%;height:100%;"
    
20.                             url="${path}/MaterialObject/queryBackCatalog" idField="id"
    
21.                             allowResize="true" pageSize="20" onselectionchanged="onSelectionChanged2"
    
22.                             allowCellSelect="true"  allowAlternating="true" showPager="false" >
    
23.                             <div property="columns">            
    
24.                     <div type="indexcolumn">序号</div>
    
25.                     <div field="CATALOGCOUNT" width="120" headerAlign="center" allowSort="false">实物目录名称</div>               
    
26.                                </div>
    
27.                         </div>
    
28.                         </div>
    
29.                                 <!--左下高级查询区域 -->
    
30.                                 <div id="leftdownpanel" class="mini-panel" title="自定义分组高级查询" style="width:100%;height:35%;"showToolbar="true" expanded="true" collapseOnTitleClick="true">
    
31.                         <div property="toolbar" style="width: 100%;">
    
32.                                                                 <input id="txtTreeSearch1" class="mini-textbox" emptyText="请输入查询关键字..."
    
33.                                                                         onenter="onTreeSearchKeyEnter" width="65%"/>
    
34.                                                                 <a id="customfind" class="mini-button"  plain="true" iconCls="icon-query" tooltip="查询" width="10%" onclick="onCustomTreeSearch()"></a>
    
35.                                                                 <a id="customset" class="mini-button" plain="true" iconCls="icon-set" tooltip="设置" width="10%" onclick="SetCondition()"></a>
    
36.                                 </div>
    
37.                                 <div class="mini-fit" >
    
38.                                         <ul id="gjcxTree" class="mini-tree" url="${path}/CustomCondition/queryCondition"
    
39.                                                 style="width: 100%; height: 100%;" showTreeIcon="true"
    
40.                                                 allowDrag="true" allowDrop="true" showExpandButtons="true"
    
41.                                                 resultAsTree="false" expandOnLoad="true"  onnodeselect="onCustomNodeSelect(e)">
    
42.                                         </ul>
    
43.                                 </div>
    
44.                         </div>
    
45.                         <!--左下目录注释区域 -->
    
46.                         <div id="remarkpanel" class="mini-panel" title="目录注释"  style="width:100%;height:35%;"
    
47.                             showCollapseButton="true" bodyStyle="padding:0;word-break:break-all;font-size:13px;"
    
48.                                    showCloseButton="false" expanded="true" visible="true" onbuttonclick="onButtonClick" >
    
49.                         </div>
    
50.                 </div>

复制代码

1376651290

1376651290 发表于 2016-9-29 15:30
@felt
版主

1. function onButtonClick(e){
   
2.               debugger;
   
3.                setTimeout(function () {
   
4.             mini.layout();
   
5.         }, 0)
   
6.       }

复制代码

版主，我的html这样写的，当前页面主要显示leftuppanel和remarkpanel，但按照你说的布局也还是没有变化，panel折叠后有空白区域

felt

1376651290 发表于 2016-9-29 15:32
版主，我的html这样写的，当前页面主要显示leftuppanel和remarkpanel，但按照你说的布局也还是没有变化， ...

按我的例子去调整你的页面，如果不会调整，请直接打包你的页面上来