FineUI 官方论坛

标题: 布局请教 [打印本页]

作者: /可爱WEBMAN 时间: 2012-4-12 11:15
标题: 布局请教
这样一个布局，如何让下面的Grid高度100%
[attach]253[/attach]

作者: sanshi 时间: 2012-4-12 12:36
仔细看下vBox布局

作者: Landroid 时间: 2012-4-12 13:08
本帖最后由 Landroid 于 2012-4-12 13:30 编辑

<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 >
</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

我总结了一下，详细的在这http://bbs.extasp.net/forum.php?mod=viewthread&tid=440&page=1&extra=#pid1752

作者: /可爱WEBMAN 时间: 2012-4-13 17:18

sanshi 发表于 2012-4-12 12:36
仔细看下vBox布局

vBOx 上面的就没有了，只有下面的grid了

作者: /可爱WEBMAN 时间: 2012-4-13 17:20
<form id="form1" runat="server">
<ext

ageManager ID="

ageManager1" runat="server" />
<ext

anel ID="

anel1" runat="server" BodyPadding="5px" EnableBackgroundColor="true"
ShowBorder="true" ShowHeader="false" Layout="VBox" Title="

anel" EnableFrame="True">
      <Toolbars>
         <ext:Toolbar ID="Toolbar1" runat="server">
            <Items>
                  <ext:Button ID="Button_search" Text="查询" CssStyle="padding-right:5px" EnablePostBack="false"
                     Icon="ZoomIn" runat="server">
                  </ext:Button>
                  <ext:Button ID="Button_add" Text="增加" CssStyle="padding-right:5px" EnablePostBack="true"
                     runat="server" Icon="UserAdd">
                  </ext:Button>
                  <ext:Button ID="Button_modifi" Icon="UserEdit" Text="修改" CssStyle="padding-right:5px"
                     EnablePostBack="true" runat="server" >
                  </ext:Button>
                  <ext:Button ID="Button_del" Icon="UserDelete" Text="删除" CssStyle="padding-right:5px"
                     EnablePostBack="true" runat="server">
                  </ext:Button>
                  <ext:Button ID="Button_save" Icon="

ageSave" Text="保存" CssStyle="padding-right:5px"
                     runat="server">
                  </ext:Button>
                  <ext:Button ID="Button_ref" Icon="

ageRefresh" Text="刷新" CssStyle="padding-right:5px"
                     EnablePostBack="false" runat="server">
                  </ext:Button>
                  <ext:Button ID="Button_lock" Icon="Lock" Text="锁定" CssStyle="padding-right:5px" EnablePostBack="false"
                     runat="server">
                  </ext:Button>
            </Items>
         </ext:Toolbar>
      </Toolbars>
      <Items>
         <ext:GroupPanel runat="server" AutoHeight="true" BoxFlex="1" Title="用户信息" ID="GroupPanel1"
            EnableCollapse="true" EnableFrame="True">
            <Items>
                  <ext:Form ID="Form2" runat="server" ShowHeader="false" BodyStyle="border:0px" EnableBackgroundColor="true"
                     LabelAlign="Right" EnableFrame="True">
                     <Rows>
                        <ext:FormRow ID="FormRow1" runat="server">
                              <Items>
                                 <ext:TextBox ID="textusercode" ShowRedStar="true" runat="server" Label="用户编码">
                                 </ext:TextBox>
                                 <ext:TextBox ID="textusername" ShowRedStar="true" runat="server" Label="用户名">
                                 </ext:TextBox>
                                 <ext:TextBox ID="texttruename" ShowRedStar="true" runat="server" Label="真实姓名">
                                 </ext:TextBox>
                              </Items>
                        </ext:FormRow>
                        <ext:FormRow ID="FormRow2" runat="server" ColumnWidths="400">
                              <Items>
                                 <ext:TextBox ID="Text_identified" ShowRedStar="true" runat="server" Label="证件号">
                                 </ext:TextBox>
                                 <ext:TextBox ID="text_password" ShowRedStar="true" TextMode="

assword" runat="server"
                                    Label="密码">
                                 </ext:TextBox>
                                 <ext

ropDownList ID="DropDownList_sex" runat="server" ShowRedStar="true" Label="性别">
<ext

istItem Value="1" Text="男" />
<ext

istItem Value="0" Text="女" />
</ext

ropDownList>
                              </Items>
                        </ext:FormRow>
                        <ext:FormRow ID="FormRow3" runat="server">
                              <Items>
                                 <ext:TwinTriggerBox ID="ttb_office" Trigger1Icon="Clear" ShowTrigger1="False" EmptyText="点击选择查询"
                                    Trigger2Icon="Search" ShowRedStar="true" runat="server" Label="职位" >
                                 </ext:TwinTriggerBox>
                                 <ext:TwinTriggerBox ID="ttb_dempt" Trigger1Icon="Clear" ShowTrigger1="False" EmptyText="点击选择查询"
                                    Trigger2Icon="Search" ShowRedStar="true" runat="server" Label="部门">
                                 </ext:TwinTriggerBox>
                                 <ext

ropDownList ID="DropDownList_lock" runat="server" ShowRedStar="true" Label="是否锁定">
<ext

istItem Value="Y" Text="是" />
<ext

istItem Value="N" Text="否" />
</ext

ropDownList>
                              </Items>
                        </ext:FormRow>
                        <ext:FormRow ID="FormRow4" runat="server" HideMode="Display" ViewStateMode="Disabled">
                              <Items>
                                 <ext:TextBox ID="text_memo" runat="server" Label="备注">
                                 </ext:TextBox>
                                 <ext:HiddenField ID="HiddenField_pk_user" Label="pk_user" runat="server">
                                 </ext:HiddenField>
                                 <ext:HiddenField  ID="HiddenField_office" Label="office" runat="server">
                                 </ext:HiddenField>
                              </Items>
                        </ext:FormRow>
                     </Rows>
                  </ext:Form>
            </Items>
         </ext:GroupPanel>
      </Items>
</ext

anel>
<ext:Grid runat="server" IsDatabasePaging="True" AllowSorting="True" EnableCheckBoxSelect="True"
      Title="人员档案列表" BoxConfigAlign="Middle" BoxMargin="0" ID="Grid1"
      EnableRowClick="True" EnableRowDoubleClick="false"
   >
      <columns>

                     <ext:TemplateField ColumnID="ct0" HeaderText="序号">
                        <ItemTemplate>
                              <%# Container.DataItemIndex + 1 %>
                        </ItemTemplate>
                     </ext:TemplateField>
                     <ext:TemplateField ColumnID="ct1" HeaderText="用户编码">
                        <ItemTemplate>
                              <%# ((AirPlan.Model.user)Container.DataItem).usercode %>
                        </ItemTemplate>
                     </ext:TemplateField>
                     <ext:TemplateField ColumnID="ct2" HeaderText="真实姓名">
                        <ItemTemplate>
                              <%# ((AirPlan.Model.user)Container.DataItem).truename %>
                        </ItemTemplate>
                     </ext:TemplateField>
                     <ext:TemplateField ColumnID="ct3" HeaderText="性别">
                        <ItemTemplate>
                              <%# ((AirPlan.Model.user)Container.DataItem).Sex=="1"?"男":"女" %>
                        </ItemTemplate>
                     </ext:TemplateField>
                     <ext:TemplateField ColumnID="ct4" HeaderText="用户名">
                        <ItemTemplate>
                              <%# ((AirPlan.Model.user)Container.DataItem).username %>
                        </ItemTemplate>
                     </ext:TemplateField>
                     <ext:TemplateField ColumnID="ct5" HeaderText="证件号">
                        <ItemTemplate>
                              <%# ((AirPlan.Model.user)Container.DataItem).identifiedcode %>
                        </ItemTemplate>
                     </ext:TemplateField>
                     <ext:TemplateField ColumnID="ct6" HeaderText="是否锁定">
                        <ItemTemplate>
                              <%# ((AirPlan.Model.user)Container.DataItem).locked=="N"?"否":"是" %>
                        </ItemTemplate>
                     </ext:TemplateField>
                     <ext:TemplateField ColumnID="ct7" HeaderText="创建人">
                        <ItemTemplate>
                              <%# ((AirPlan.Model.user)Container.DataItem).createdby %>
                        </ItemTemplate>
                     </ext:TemplateField>
                     <ext:TemplateField ColumnID="ct8" HeaderText="创建时间">
                        <ItemTemplate>
                              <%# ((AirPlan.Model.user)Container.DataItem).createdon %>
                        </ItemTemplate>
                     </ext:TemplateField>
                     <ext:TemplateField ColumnID="ct9" hidden="true"  HeaderText="pk_user">
                        <ItemTemplate>
                        <asp

abel ID="Label2" hidden="true" runat="server" Text='<%# ((AirPlan.Model.user)Container.DataItem).pk_user %>'></asp

abel>
                        </ItemTemplate>
                     </ext:TemplateField>
                  </columns>
</ext:Grid>
</form>

作者: Landroid 时间: 2012-4-13 17:23

/可爱WEBMAN 发表于 2012-4-13 17:18
vBOx 上面的就没有了，只有下面的grid了

VBox内的panel要设置高度

作者: /可爱WEBMAN 时间: 2012-4-13 17:47

Landroid 发表于 2012-4-13 17:23
VBox内的panel要设置高度

这个高度没法设啊，就是要求为hight=100%

作者: Landroid 时间: 2012-4-13 18:11

/可爱WEBMAN 发表于 2012-4-13 17:47
这个高度没法设啊，就是要求为hight=100%

没看到你设置高度的地方哦，
建议你研究一下vBox布局 http://extasp.net/#/layout/vbox.aspx
或者js设置高度吧~~

欢迎光临 FineUI 官方论坛 (https://fineui.com/BBS/)