FineUI 官方论坛

标题: 【已解决】一行多个控件如何排版 [打印本页]
作者: 杜志彬    时间: 2012-9-19 09:26
标题: 【已解决】一行多个控件如何排版
大家好。我现在用ExtAspNet在做查询条件时遇到困难，已经尝试很长时间无果，请求大家帮忙。

我的需求是一行里面，可能会有一到多个控件用做查询条件，这些控件按指定的宽度显示，右侧直接空着就可以。现在使用Form、FormRow作为容器。可以在控件比较少时，一两个控件的长度被拉伸成了100%，很难看。

已做过的尝试：
1、尝试用Panel作为容器，但是在Panel中Label又显示不出来。
2、添加一个<extabel runat="server" ColumnWidth="100%" />，达不到效果。
3、添加一个<ext:ToolbarFill runat="server" />，达不到效果。


  2.             <ext:Form ID="frmSearch" runat="server" Height="36px" BodyPadding="5px" ShowHeader="false"
  3.                 ShowBorder="false" EnableBackgroundColor="true" LabelWidth="70px" >
  4.                 <Rows>
  5.                     <ext:FormRow runat="server">
  6.                         <Items>
  7.                             <ext:DropDownList ID="dropDateRange" runat="server" Label="日期范围" AutoPostBack="true" ColumnWidth="100px"
  8.                                 OnSelectedIndexChanged="dropDateRange_SelectedIndexChanged">
  9.                                 <ext:ListItem Text="全部" Value="All" />
  10.                                 <ext:ListItem Text="今天" Value="Today" />
  11.                                 <ext:ListItem Text="最近三天" Value="Recently3Days" />
  12.                                 <ext:ListItem Text="最近七天" Value="Recently7Days" Selected="true" />
  13.                                 <ext:ListItem Text="最近一月" Value="Recently1Month" />
  14.                                 <ext:ListItem Text="最近一年" Value="Recently1Year" />
  15.                                 <ext:ListItem Text="上一周" Value="Last1Week" />
  16.                                 <ext:ListItem Text="上一月" Value="Last1Month" />
  17.                                 <ext:ListItem Text="上一年" Value="Last1Year" />
  18.                             </ext:DropDownList>
  19.                             <ext:DatePicker runat="server" ID="txtBeginDate" Label="开始日期" Required="true" ShowRedStar="true" ColumnWidth="100px" />
  20.                             <ext:DatePicker runat="server" ID="txtEndDate" Label="结束日期" Required="true" ShowRedStar="true" ColumnWidth="100px" CompareControl="txtBeginDate" CompareOperator="GreaterThanEqual" CompareMessage="结束日期应该大于开始日期" />
  21.                             <ext:TwinTriggerBox ID="txtSearch" runat="server" ShowLabel="false" EmptyText="按标题、内容查询" ColumnWidth="150px"
  22.                                 Trigger1Icon="Clear" Trigger2Icon="Search" ShowTrigger1="false" OnTrigger2Click="txtSearch_Trigger2Click"
  23.                                 OnTrigger1Click="txtSearch_Trigger1Click">
  24.                             </ext:TwinTriggerBox>
  25.                         </Items>
  26.                     </ext:FormRow>
  27.                 </Rows>
  28.             </ext:Form>

复制代码

想实现的效果：
[attach]1103[/attach]

作者: 杜志彬    时间: 2012-9-22 05:00
找到答案了。我的ColumnWidth用法不对，实际上ColumnWidth不起作用，需要设置FormRow的ColumnWidths属性。

  1.             <ext:Form ID="frmSearch" runat="server" BodyPadding="5px" ShowHeader="false" ShowBorder="false" Height="36px"
  2.                 EnableBackgroundColor="true" LabelWidth="70px">
  3.                 <Rows>
  4.                     <ext:FormRow runat="server" ColumnWidths="190px 190px 190px 190px 100%">
  5.                         <Items>
  6.                             <ext:DropDownList ID="dropDateRange" runat="server" Label="日期范围" AutoPostBack="true"
  7.                                 OnSelectedIndexChanged="dropDateRange_SelectedIndexChanged">
  8.                                 <ext:ListItem Text="全部" Value="All" />
  9.                                 <ext:ListItem Text="今天" Value="Today" />
  10.                                 <ext:ListItem Text="最近三天" Value="Recently3Days" />
  11.                                 <ext:ListItem Text="最近七天" Value="Recently7Days" Selected="true" />
  12.                                 <ext:ListItem Text="最近一月" Value="Recently1Month" />
  13.                                 <ext:ListItem Text="最近一年" Value="Recently1Year" />
  14.                                 <ext:ListItem Text="上一周" Value="Last1Week" />
  15.                                 <ext:ListItem Text="上一月" Value="Last1Month" />
  16.                                 <ext:ListItem Text="上一年" Value="Last1Year" />
  17.                             </ext:DropDownList>
  18.                             <ext:DatePicker runat="server" ID="txtBeginDate" Label="开始日期" Required="true" ShowRedStar="true" />
  19.                             <ext:DatePicker runat="server" ID="txtEndDate" Label="结束日期" Required="true" ShowRedStar="true"
  20.                                 CompareControl="txtBeginDate" CompareOperator="GreaterThanEqual" CompareMessage="结束日期应该大于开始日期" />
  21.                             <ext:TwinTriggerBox ID="txtSearch" runat="server" ShowLabel="false" EmptyText="按标题、内容查询"
  22.                                 Trigger1Icon="Clear" Trigger2Icon="Search" ShowTrigger1="false" OnTrigger2Click="txtSearch_Trigger2Click"
  23.                                 OnTrigger1Click="txtSearch_Trigger1Click">
  24.                             </ext:TwinTriggerBox>
  25.                             <ext:Label runat="server" />
  26.                         </Items>
  27.                     </ext:FormRow>
  28.                 </Rows>
  29.             </ext:Form>

复制代码

作者: 飘雪    时间: 2012-9-22 07:50
我也有同样的问题，试试
作者: 飘雪    时间: 2012-9-24 00:51
今天改改，挺好用的，还是自己设置的问题，多谢了
作者: 飘雪    时间: 2012-9-24 00:55
如果加上单独的label的话，调整位置也是这样的方法吗
作者: sanshi    时间: 2013-3-20 05:41
杜志彬 发表于 2012-9-22 05:00
找到答案了。我的ColumnWidth用法不对，实际上ColumnWidth不起作用，需要设置FormRow的ColumnWidths属性。
...

是这样的，FormRow的ColumnWidths用来控制一行显示几个表单控件，这篇文章有描述：http://www.cnblogs.com/sanshi/archive/2009/07/17/1525926.html


ColumnWidth 仅用于列布局：http://www.cnblogs.com/sanshi/archive/2012/09/14/2684377.html

作者: weston    时间: 2013-3-20 12:27
我也是这样，试试你的方法，谢谢！
作者: delphi9    时间: 2013-6-2 11:21
谢谢楼上，解决了我的困惑：）
作者: jiao_lp    时间: 2013-7-31 10:35
我也有同样的问题，试试
作者: Apollo    时间: 2015-7-14 11:30
在Panel 内如何调整呢？



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