FineUI秘密花园（六） — 表单控件

[原创]FineUI秘密花园（六）—表单控件

FineUI中有哪些常用的表单控件，它们有什么共同点和不同点，这一篇文章我们会详细解说。

 

表单控件的公共属性

所有的表单都具有如下属性：
ShowLabel：是否显示标签（默认值：true）。
ShowEmptyLabel：是否显示空白的标签（默认值：false）。
Label：标签文本（默认值：""）。
LabelSeparator：表单中字段与标签的分隔符，可以通过Web.config、PageManager、Form三个级别进行控制，一般不需要设置此属性（默认值：PageManager中的设置参数）。
ShowRedStar：在标签后面显示红色的星号（用来标识必填项），一般与Required等表单验证属性配合使用。
Readonly：表单控件的只读状态（默认值：false）。
TabIndex：Tab按键的跳转顺序，一般不需要设置此属性，页面会根据控件的出现顺序自动决定Tab按键的跳转顺序（默认值：null）。
OffsetRight：距离右侧边界的宽度，可以通过Web.config、PageManager、Form三个级别进行控制，一般不需要设置此属性（默认值：PageManager中的设置参数）。
ToolTip：提示文本（默认值：""）。
ToolTipTitle：提示文本的标题（默认值：""）。
ToolTipAutoHide：是否自动隐藏提示信息（默认值：true）。

注意：很多属性只有在表单内才有意义，比如ShowLabel、Label、OffsetRight等属性。在表单外放置的表单控件是不显示标签的。

 

 

还有一些属性是特定表单控件才具有的，如下所示：
Text：显示文本。
EmptyText：文本框为空时显示的文本（只对文本输入框、日期选择器等少数几个控件有效）。
AutoPostBack：是否自动回发（只对下拉列表、日期选择器、文本输入框等少数几个控件有效）。
EncodeText：是否对文本进行编码（只对文本标签、超链接、链接按钮等少数几个控件有效）。

 

除此之外，有些表单控件公共分享了很多表单验证属性。下一篇文章我们会详细介绍表单验证相关的属性。

 

下面我们会把部分表单控件所特有的一些属性通过示例进行集中展示。

 

自动编码文本

默认情况下，Label的EncodeText属性为true，会对文本中的HTML进行编码。当然我们也可以设置EncodeText=false，从而将HTML片段赋值给Text属性，请看这个示例：

1:<ext:LabelText="普通的Label标签，会自动编码字符串（比如：<strong></strong>）"runat="server">

2:</ext:Label>

3:<br/>

4:<ext:LabelEncodeText="false"Text="<ahref='http://www.ustc.edu.cn/'target='_blank'>中国科学技术大学</a>"

5:runat="server">

6:</ext:Label>

7:<br/>

8:<ext:LabelEncodeText="false"Text="<spanstyle='color:red;font-weight:bold;'>修改文本的样式</span>"

9:runat="server">

10:</ext:Label>

页面显示效果如下所示：





 

 

自动回发的文本输入框

如何在文本输入框失去焦点时自动回发页面呢，下面的几行代码可以简单地实现这个功能？

<ext:TextBoxrunat="server"ID="TextBox1"EmptyText="文本框值改变则自动回发"Width="200"AutoPostBack="true"
OnTextChanged="TextBox1_TextChanged">
</ext:TextBox>

 

protectedvoidTextBox1_TextChanged(objectsender,EventArgse)
{
labResult.Text="文本框的值："+TextBox1.Text;
}

 

富文本编辑器

FineUI内置了一个富文本编辑器，对于HTML编辑要求不高的情况下，完全可以使用内置的HtmlEditor，这样不仅样式风格统一，而且编码非常方便。





 

有很多属性来控制HtmlEditor的显示，几乎覆盖了工具栏的每一项，如下所示：
EnableAlignments：启用左右定位。
EnableColors：启用颜色。
EnableFont：启用字体。
EnableFontSize：启用调整字体大小。
EnableFormat：启用格式化。
EnableLinks：启用创建链接。
EnableLists：启用创建列表。
EnableSourceEdit：启用源码视图。
FontFamilies：字体列表。
EnableChineseFont：启用中文字体。

上面所有属性的默认值都是true，其中特别需要提到的是EnableChineseFont，因为默认的字体都是英文的，而在国内环境中中文字体是必不可少了，所以FineUI就把一些常见的中文字体配置到了富文本编辑器中。





 

 

有两个触发按钮的搜索框

这也是Web开发中的一个常见需求，一个用来搜索的文本输入框，当用户输入关键字并点击搜索按钮时，显示一个清空关键词的按钮。这个需求也被内置到了FineUI中，这就是TwinTriggerBox，请看下面这个示例：

1:<ext:TwinTriggerBoxID="ttbxMyBox2"OnTrigger1Click="ttbxMyBox2_Trigger1Click"OnTrigger2Click="ttbxMyBox2_Trigger2Click"

2:Trigger1Icon="Clear"ShowTrigger1="False"EmptyText="搜索用户名"Trigger2Icon="Search"

3:runat="server">

4:</ext:TwinTriggerBox>

1:protectedvoidttbxMyBox2_Trigger2Click(objectsender,EventArgse)

2:{

3:if(!String.IsNullOrEmpty(ttbxMyBox2.Text))

4:{

5://执行搜索动作

6:Alert.ShowInTop(String.Format("在关键词“{0}”中搜索",ttbxMyBox2.Text));

7: 

8:ttbxMyBox2.ShowTrigger1=true;

9:}

10:else

11:{

12:Alert.ShowInTop("请输入你要搜索的关键词！");

13:}

14:}

15: 

16://点击TwinTriggerBox的取消按钮

17:protectedvoidttbxMyBox2_Trigger1Click(objectsender,EventArgse)

18:{

19://执行清空动作

20:Alert.ShowInTop("取消搜索！");

21: 

22:ttbxMyBox2.Text="";

23:ttbxMyBox2.ShowTrigger1=false;

24:}

TwinTriggerBox有很多用来控制显示隐藏触发按钮的属性，不过仅从它们的名字就能猜出功能，这也是FineUI简单的原因之一。

 

显示效果如下图所示：









 

 

日期选择器

DatePicker也是Web开发中必不可少的一个控件，先来看下显示效果：





 

它的一些属性值得我们关注：
SelectedDate：选择的日期。
DateFormatString：日期格式字符串（默认值："yyyy-MM-dd"）。
MaxDate：最大日期，大于此日期的以灰色显示，不可选择。
MinDate：最小日期，小于此日期的以灰色显示，不可选择

注意：DateFormatString遵守DotNet默认的规则，简单概括如下：

   d月中的某一天。一位数的日期没有前导零。 

   dd月中的某一天。一位数的日期有一个前导零。 

   ddd周中某天的缩写名称，在AbbreviatedDayNames中定义。 

   dddd周中某天的完整名称，在DayNames中定义。 

   M月份数字。一位数的月份没有前导零。 

   MM月份数字。一位数的月份有一个前导零。 

   MMM月份的缩写名称，在AbbreviatedMonthNames中定义。 

   MMMM月份的完整名称，在MonthNames中定义。 

   y不包含纪元的年份。如果不包含纪元的年份小于10，则显示不具有前导零的年份。 

   yy不包含纪元的年份。如果不包含纪元的年份小于10，则显示具有前导零的年份。 

   yyyy包括纪元的四位数的年份。

 

单选框列表与复选框列表

首先来看看各自的显示效果：









这两个控件不仅支持标签声明式的创建方式，如下所示：

1:<ext:RadioButtonListID="RadioButtonList1"Label="列表一"runat="server">

2:<ext:RadioItemText="可选项1"Value="value1"/>

3:<ext:RadioItemText="可选项2"Value="value2"/>

4:<ext:RadioItemText="可选项3"Value="value3"Selected="true"/>

5:</ext:RadioButtonList>

而且支持数据绑定的创建方式，如下所示：

1:<ext:RadioButtonListID="RadioButtonList2"Label="列表二（一列）"ColumnNumber="1"runat="server">

2:</ext:RadioButtonList>

1:privatevoidBindRadioButtonList()

2:{

3:List<TestClass>myList=newList<TestClass>();

4:myList.Add(newTestClass("1","数据绑定值1"));

5:myList.Add(newTestClass("2","数据绑定值2"));

6:myList.Add(newTestClass("3","数据绑定值3"));

7:myList.Add(newTestClass("4","数据绑定值4"));

8: 

9:RadioButtonList2.DataTextField="Name";

10:RadioButtonList2.DataValueField="Id";

11:RadioButtonList2.DataSource=myList;

12:RadioButtonList2.DataBind();

13: 

14:RadioButtonList2.SelectedValue="3";

15:}

 

除此之外，它们还支持必选项验证、自动回发、多列显示、竖排显示等特性，因此下面这些属性也需要我们关注：
Required：是否必填项。
RequiredMessage：为空时提示信息。
AutoPostBack：是否自动回发。
ColumnNumber：渲染成几列。
ColumnVertical：是否按照纵向顺序渲染。
DataTextField：是否按照纵向顺序渲染。
DataTextFormatString：显示文本的格式化字符串。
DataValueField：显示值的数据字段。
DataSource：数据源。
SelectedIndex/SelectedValue/SelectedItem：选中项（适用于RadioButtonList）。
SelectedIndexArray/SelectedValueArray/SelectedItemArray：选中项列表（适用于CheckBoxList）。

 

小结

除了上文提到的这些表单控件，还有一些其他表单控件，比如单选框、复选框、超链接、图片、链接按钮、隐藏字段、多行文本输入框、单触发器输入框，它们相对比较简单而无需过多的描述。

还有两个比较比较重要的表单控件——文件上传和下拉列表，我们会在接下来的两篇文章中详细描述。

 

注：《FineUI秘密花园》系列文章由三生石上原创，博客园首发，转载请注明出处。文章目录 官方论坛

分类: FineUI, Extjs, Javascript

好文要顶 关注我 收藏该文 

 






三生石上
关注-17
粉丝-2080

荣誉：推荐博客
+加关注

12

0

(请您对文章做出评价)

« 上一篇：[原创]ExtAspNet秘密花园（三）
—站点级别的配置
» 下一篇：[原创]FineUI秘密花园（七）
—上传控件

posted@ 2012-02-1912:29 三生石上 阅读(16861)
评论(12) 编辑 收藏

评论

  
#1楼 2012-02-19
15:52 | 通用C#系统架构  

看上去很不错，顶一下。
支持(0)反对(0)

  
#2楼 2012-02-19
16:32 | adssadsa[未注册用户]

你好，请教一下如何实现通过点击页面上的链接，在主页面弹出一个选项卡

  
#3楼 2012-02-19
19:28 | DandanDie[未注册用户]

你好，请教下富文本编辑器内容貌似不能通过.text获取内容.

  
#4楼 2012-02-24
13:17 | 隨風往事  

ExtAspNet.Alert.Show(HtmlEditor1.Text);

不能获取到任何值！

使用的getAttributeNodeNS()已废弃。请使用getAttributeNS()替代。@http://localhost:1696/WebForm2.aspx
支持(0)反对(0)

  
#5楼 2012-09-04
15:41 | moyanger  

单选框列表与复选框列表

6.DataTextField：是否按照纵向顺序渲染。 

这条解释写错了。
支持(0)反对(0)

  
#6楼 2012-10-10
11:00 | quickwh  

你好，DatePicker如何设置中英文样式切换。
支持(0)反对(0)

  
#7楼 2012-10-26
22:26 | RDIFramework.NET  

好东西，现在我的项目准备用这个看看，不要让我失望了哟。
支持(0)反对(0)

  
#8楼 2014-03-27
10:11 | mark_01  

怎么在一个标签内单独修改Label的宽度width,
支持(0)反对(0)

  
#9楼[楼主] 2014-03-27
11:09 | 三生石上  

@mark_01
引用
怎么在一个标签内单独修改Label的宽度width,

可以通过Form的属性来统一控制LabelWidth。没有属性直接控制单个表单字段的Label宽度，如果确实需要，可以通过CssClass来自行调整
支持(0)反对(0)

  
#10楼 2014-03-27
11:29 | mark_01  

@三生石上

lablel里面text可以改变属性lablel的宽度只能通过lablewidth统一改变，CssClass只是改变的text属性，要是能单独改变lable宽度就好了,
支持(0)反对(0)

  
#11楼 2014-03-27
11:35 | mark_01  

@三生石上

可以单独改变吗，不然样式不好看
支持(0)反对(0)

  
#12楼 2014-03-31
08:09 | 晴天中的枫  

RadioButtonList在后台操作的时候获取不到值