FineUI 官方论坛

标题: Grid高度设置技巧 [打印本页]
作者: Landroid    时间: 2012-4-12 13:23
标题: Grid高度设置技巧
本帖最后由 Landroid 于 2012-4-12 13:30 编辑

情景描述：
在实际项目中，我们可能会遇到各种诡异怪异令人纠结的需求，比如说：我要使grid填充页面剩余部分，不设置宽度grid的宽度会自适应,,但是高度不设置，就会根据grid中的内容自适应，而我需要grid的高度自动根据window的高度变化。。。
看到论坛有人问这类问题，分享一下我的方法：
方法描述：
添加如下代码到
<body>
....
....
<!-- 大约是添加到这儿吧-->
</body>
  1.     <script type="text/javascript">
  2.         function onReady() {
  3.             var form2 = Ext.getCmp('<%=Form2.ClientID%>');
  4.             var grid1 = Ext.getCmp('<%=Grid1.ClientID%>');
  5.             var bodySize = Ext.getBody().getSize();
  6.             var form2Size = form2.getSize();
  7.             grid1.setHeight(bodySize.height - form2Size.height);
  8.         }
  9.     </script>
复制代码

代码解释
我测试的用例中，页面中元素结构如下
<body>
...
<ext:Form id="form2"></ Form >
<ext:Grid id="grid1"></ Grid >
<script>....</script>
</body>

var bodySize = Ext.getBody().getSize(); //是获取页面body的高度和宽度
var form2Size = form2.getSize();//是获取grid上的form的高度和宽度
grid1.setHeight(bodySize.height - form2Size.height); //设置grid高度，为：body高度 - form2高度


注意，假如给grid设置了AutoHeight="true"，请修改为false



实际使用中，根据自己的需求改吧
截图就不截了，自己试试看？
作者: support    时间: 2012-4-12 15:56
恩。通过JS修改大小的方式也可以，不过要注意在页面大小改变时重新计算才行。

其实有更简单的办法 - 布局。

比如这个页面：http://extasp.net/#/iframe/grid_iframe.aspx
用的就是VBox布局：
  1. <ext:Panel ID="Panel7" runat="server" EnableBackgroundColor="true" BodyPadding="3px"
  2.         EnableLargeHeader="true" Title="Panel" ShowBorder="false" ShowHeader="True" Layout="VBox"
  3.         BoxConfigAlign="Stretch">
  4.         <Items>
  5.             <ext:Form ID="Form5" ShowBorder="False" BodyPadding="5px" EnableBackgroundColor="true"
  6.                 ShowHeader="False" runat="server">
  7.                 ...
  8.             </ext:Form>
  9.             <ext:Panel ID="Panel8" ShowBorder="True" ShowHeader="false" BoxFlex="1" Layout="Fit"
  10.                 runat="server">
  11.                 <Toolbars>
  12.                     ...
  13.                 </Toolbars>
  14.                 <Items>
  15.                     <ext:Grid ID="Grid2" Title="Grid2" PageSize="80" ShowBorder="false" AllowPaging="true"
  16.                         OnPageIndexChange="Grid2_PageIndexChange" ShowHeader="False" runat="server" EnableCheckBoxSelect="True"
  17.                         DataKeyNames="Id,Name" OnSort="Grid2_Sort" EnableRowNumber="True">
  18.                         ...
  19.                     </ext:Grid>
  20.                 </Items>
  21.             </ext:Panel>
  22.         </Items>
  23.     </ext:Panel>
复制代码
作者: Landroid    时间: 2012-4-12 17:08
support 发表于 2012-4-12 15:56
恩。通过JS修改大小的方式也可以，不过要注意在页面大小改变时重新计算才行。

其实有更简单的办法 - 布局 ...

不错的方法~~
当页面大小改变时，我的写法就不行了~
作者: yezie    时间: 2012-4-13 14:43
高度不设置，就会根据grid中的内容自适应？
我这绑定后只能显示一行，还有滚动条。。。
作者: Landroid    时间: 2012-4-13 15:15
yezie 发表于 2012-4-13 14:43
高度不设置，就会根据grid中的内容自适应？
我这绑定后只能显示一行，还有滚动条。。。 ...

？我的是3.1.3版本，浏览器chrome，ie9。。。按内容自适应

AutoHeight默认值为false

仔细查看我的代码，没有其他设置影响高度。。显示正常。。
作者: yezie    时间: 2012-4-14 14:54
Landroid 发表于 2012-4-13 15:15
？我的是3.1.3版本，浏览器chrome，ie9。。。按内容自适应

AutoHeight默认值为false

我知道原因了，我的页面是先显示空白grid，通过按钮去绑定，就不能自适应高度了。。。
作者: Landroid    时间: 2012-4-14 18:17
yezie 发表于 2012-4-14 14:54
我知道原因了，我的页面是先显示空白grid，通过按钮去绑定，就不能自适应高度了。。。 ...

根据内容高度变化的话，AutoHeight="true"
根据窗体高度的话，使用布局，或者js代码设置高度，或者把grid放在region margin="center"中
作者: ☆幻~精灵    时间: 2012-6-17 03:12
如果页面，只需要一个Grid的话，我直接设置AutoSizePanelID 为Grid的Id，就可以自适应了。



欢迎光临 FineUI 官方论坛 (https://fineui.com/bbs/) Powered by Discuz! X3.4