网站首页
开启辅助访问

FineUI 官方论坛

 找回密码
 立即注册

QQ登录

只需一步，快速开始

本论坛已关闭（禁止注册、发帖和回复）
请移步 三石和他的朋友们

FineUI首页 WebForms - MVC & Core - JavaScript 常见问题 - QQ群 - 十周年征文活动

FineUI（开源版） 下载源代码 - 下载空项目 - 获取ExtJS - 文档 在线示例 - 版本更新 - 捐赠作者 - 教程

升级到 ASP.NET Core 3.1，快、快、快！ 全新ASP.NET Core，比WebForms还简单！ 欢迎加入【三石和他的朋友们】（基础版下载）

搜索
FineUI 官方论坛»论坛首页 › FineUI（WebForms，开源版） › FineUI 经验分享区 › 【已解决】一行多个控件如何排版
返回列表 发新帖
查看: 6631|回复: 9
打印 上一主题 下一主题

【已解决】一行多个控件如何排版

[复制链接]
杜志彬
跳转到指定楼层
楼主
发表于 2012-9-19 09:26:20 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
大家好。我现在用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>

复制代码

想实现的效果：


本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有帐号？立即注册

x
回复

举报

杜志彬
沙发
 楼主| 发表于 2012-9-22 05:00:06 | 只看该作者
找到答案了。我的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:06 | 只看该作者
我也有同样的问题，试试
回复 支持 反对

举报

飘雪
地板
发表于 2012-9-24 00:51:21 | 只看该作者
今天改改，挺好用的，还是自己设置的问题，多谢了
回复 支持 反对

举报

飘雪
5#
发表于 2012-9-24 00:55:07 | 只看该作者
如果加上单独的label的话，调整位置也是这样的方法吗
回复 支持 反对

举报

weston
6#
发表于 2013-3-20 12:27:20 | 只看该作者
我也是这样，试试你的方法，谢谢！
回复 支持 反对

举报

sanshi
7#
发表于 2013-3-20 05:41:59 | 只看该作者
杜志彬 发表于 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

回复 支持 反对

举报

delphi9
8#
发表于 2013-6-2 11:21:37 | 只看该作者
谢谢楼上，解决了我的困惑：）
回复 支持 反对

举报

jiao_lp
9#
发表于 2013-7-31 10:35:51 | 只看该作者
我也有同样的问题，试试
回复 支持 反对

举报

Apollo
10#
发表于 2015-7-14 11:30:17 | 只看该作者
在Panel 内如何调整呢？
回复 支持 反对

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|FineUI 官方论坛 ( 皖ICP备2021006167号-1 )

GMT+8, 2024-11-23 10:23 , Processed in 0.060595 second(s), 18 queries , Gzip On.

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表