Grid高度设置技巧

Landroid · 发表于 2012-4-12 13:23:45

本帖最后由 Landroid 于 2012-4-12 13:30 编辑

情景描述：
在实际项目中，我们可能会遇到各种诡异怪异令人纠结的需求，比如说：我要使grid填充页面剩余部分，不设置宽度grid的宽度会自适应,,但是高度不设置，就会根据grid中的内容自适应，而我需要grid的高度自动根据window的高度变化。。。
看到论坛有人问这类问题，分享一下我的方法：

方法描述：
添加如下代码到
<body>
....
....

</body>

<script type="text/javascript">
function onReady() {
var form2 = Ext.getCmp('<%=Form2.ClientID%>');
var grid1 = Ext.getCmp('<%=Grid1.ClientID%>');
var bodySize = Ext.getBody().getSize();
var form2Size = form2.getSize();
grid1.setHeight(bodySize.height - form2Size.height);
}
</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:30

恩。通过JS修改大小的方式也可以，不过要注意在页面大小改变时重新计算才行。

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

比如这个页面：http://extasp.net/#/iframe/grid_iframe.aspx
用的就是VBox布局：

<ext:Panel ID="Panel7" runat="server" EnableBackgroundColor="true" BodyPadding="3px"
EnableLargeHeader="true" Title="Panel" ShowBorder="false" ShowHeader="True" Layout="VBox"
BoxConfigAlign="Stretch">
<Items>
<ext:Form ID="Form5" ShowBorder="False" BodyPadding="5px" EnableBackgroundColor="true"
ShowHeader="False" runat="server">
...
</ext:Form>
<ext:Panel ID="Panel8" ShowBorder="True" ShowHeader="false" BoxFlex="1" Layout="Fit"
runat="server">
<Toolbars>
...
</Toolbars>
<Items>
<ext:Grid ID="Grid2" Title="Grid2" PageSize="80" ShowBorder="false" AllowPaging="true"
OnPageIndexChange="Grid2_PageIndexChange" ShowHeader="False" runat="server" EnableCheckBoxSelect="True"
DataKeyNames="Id,Name" OnSort="Grid2_Sort" EnableRowNumber="True">
...
</ext:Grid>
</Items>
</ext:Panel>
</Items>
</ext:Panel>

复制代码

Landroid · 发表于 2012-4-12 17:08:20

support 发表于 2012-4-12 15:56
恩。通过JS修改大小的方式也可以，不过要注意在页面大小改变时重新计算才行。

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

不错的方法~~
当页面大小改变时，我的写法就不行了~

yezie · 发表于 2012-4-13 14:43:57

高度不设置，就会根据grid中的内容自适应？
我这绑定后只能显示一行，还有滚动条。。。

Landroid · 发表于 2012-4-13 15:15:50

yezie 发表于 2012-4-13 14:43
高度不设置，就会根据grid中的内容自适应？
我这绑定后只能显示一行，还有滚动条。。。 ...

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

AutoHeight默认值为false

仔细查看我的代码，没有其他设置影响高度。。显示正常。。

yezie · 发表于 2012-4-14 14:54:10

Landroid 发表于 2012-4-13 15:15
？我的是3.1.3版本，浏览器chrome，ie9。。。按内容自适应

AutoHeight默认值为false

我知道原因了，我的页面是先显示空白grid，通过按钮去绑定，就不能自适应高度了。。。

Landroid · 发表于 2012-4-14 18:17:26

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

根据内容高度变化的话，AutoHeight="true"
根据窗体高度的话，使用布局，或者js代码设置高度，或者把grid放在region margin="center"中

☆幻~精灵 · 发表于 2012-6-17 03:12:15

如果页面，只需要一个Grid的话，我直接设置AutoSizePanelID 为Grid的Id，就可以自适应了。

		自动登录	找回密码
密码			立即注册

Grid高度设置技巧

浏览过的版块