Ext.Net学习笔记20:Ext.Net FormPanel 复杂用法
Ext.Net学习笔记20:Ext.Net FormPanel 复杂用法
在上一篇笔记中我们介绍了Ext.Net的简单用法,并创建了一个简单的登录表单。今天我们将看一下如何更好是使用FormPanel,包括使用字段默认值、Checkbox Grouping和Radio Button Grouping等。
为FormPanel设置默认值
在Form中设置FieldDefaults标签可以设置字段属性的默认值。来看一下我们的用法:
<FieldDefaults LabelWidth="60" LabelAlign="Right">
</FieldDefaults>
在这段代码中,我设置了LabelWidth和LabelAlign属性,那么在Form中的所有字段的Label宽度都设置为60,而对齐方式都是右对齐。
Checkbox Grouping和RadioButton Grouping
checkbox和radiobutton是比较特殊的字段,它们通常不是单独出现的,因此我们需要在Form中使用Checkbox组和RadioButton组来组织多个项。
首先来看一下RadioButton的用法:
<ext:RadioGroup runat="server" Width="400" ColumnsNumber="3" Vertical="true">
<Items>
<ext:Radio BoxLabel="Item 1" />
<ext:Radio BoxLabel="Item 2" Checked="true" />
<ext:Radio BoxLabel="Item 3" />
<ext:Radio BoxLabel="Item 4" />
<ext:Radio BoxLabel="Item 5" />
</Items>
</ext:RadioGroup>
我们定义了一个RadioGroup,它的子项为Radio的集合,效果如下图:
它的ColumnsNumber属性控制显示的列数,Vertical属性控制显示的方向,为true表示纵向排列,如果吧Vertical属性设置为false,相应的效果图如下:
CheckboxGroup的用法与RadioGroup相同,不再赘言。
FieldSet用法
FieldSet显示一个fieldset html元素,但与html元素不同的是它可折叠。
代码如下:
<ext:FieldSet runat="server" Collapsible="true" Collapsed="false" Title="基本信息">
<Items>
<ext:TextField runat="server" FieldLabel="姓名"></ext:TextField>
<ext:TextField runat="server" FieldLabel="密码"></ext:TextField>
</Items>
</ext:FieldSet>
FieldContainer 用法
FieldContainer组件用来将字段组合起来显示,效果如下:
代码如下:
<ext:FieldContainer runat="server" FieldLabel="地址" Layout="HBoxLayout">
<Items>
<ext:TextField runat="server" EmptyText="河南" IndicatorText="省" Width="100"></ext:TextField>
<ext:TextField runat="server" EmptyText="洛阳" IndicatorText="市" Width="100"></ext:TextField>
<ext:TextField runat="server" EmptyText="洛龙区" IndicatorText="区" Width="120"></ext:TextField>
</Items>
</ext:FieldContainer>
FormPanel布局
下面演示一个FormPanel常用的布局,代码如下:
<ext:Window runat="server" Title="Form 布局" Width="500" Height="300" Layout="FitLayout">
<Items>
<ext:FormPanel runat="server" BodyPadding="5" Layout="VBoxLayout">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch"></ext:VBoxLayoutConfig>
</LayoutConfig>
<FieldDefaults LabelWidth="60" LabelAlign="Right">
</FieldDefaults>
<Items>
<ext:FieldContainer runat="server" Layout="HBoxLayout">
<Items>
<ext:TextField runat="server" ID="txtOrderNO" FieldLabel="订单编号" Flex="1"></ext:TextField>
<ext:TextField runat="server" ID="txtLocation" FieldLabel="签订地点" Flex="1"></ext:TextField>
</Items>
</ext:FieldContainer>
<ext:TextArea runat="server" ID="txtRemark" FieldLabel="备注"></ext:TextArea>
</Items>
<Buttons>
<ext:Button runat="server" ID="btnOK" Icon="Accept" Text="确定"></ext:Button>
<ext:Button runat="server" ID="btnCancel" Icon="Cancel" Text="取消"></ext:Button>
</Buttons>
</ext:FormPanel>
</Items>
</ext:Window>
Ext.Net学习笔记20:Ext.Net FormPanel 复杂用法的更多相关文章
- Ext.Net学习笔记19:Ext.Net FormPanel 简单用法
Ext.Net学习笔记19:Ext.Net FormPanel 简单用法 FormPanel是一个常用的控件,Ext.Net中的FormPanel控件同样具有非常丰富的功能,在接下来的笔记中我们将一起 ...
- Ext.Net学习笔记21:Ext.Net FormPanel 字段验证(validation)
Ext.Net学习笔记21:Ext.Net FormPanel 字段验证(validation) 作为表单,字段验证当然是不能少的,今天我们来一起看看Ext.Net FormPanel的字段验证功能. ...
- 【Ext.Net学习笔记】02:Ext.Net用法概览、Ext.Net MessageBus用法、Ext.Net布局
Ext.Net用法概览 Ext.Net还是很强大,如果运用熟练可以极大的提高编程效率.如果你也要学习Ext.Net,原文博主推荐书籍:<Ext.Net Web 应用程序开发教程>,是英文的 ...
- Ext.Net学习笔记23:Ext.Net TabPanel用法详解
Ext.Net学习笔记23:Ext.Net TabPanel用法详解 上面的图片中给出了TabPanel的一个效果图,我们来看一下代码: <ext:TabPanel runat="se ...
- 【Ext.Net学习笔记】06:Ext.Net GridPanel的用法(GridPanel 折叠/展开行、GridPanel Selection、 可编辑的GridPanel)
GridPanel 折叠/展开行 Ext.Net GridPanel的行支持折叠/展开功能,这个功能个人觉得还说很有用处的,尤其是数据中包含图片等内容的时候. 下面来看看效果: 使用行折叠/展开功能之 ...
- 【Ext.Net学习笔记】05:Ext.Net GridPanel的用法(包含Filter、Sorter、Grouping、汇总(Summary)的用法)
GridPanel是用来显示数据的表格,与ASP.NET中的GridView类似. GridPanel用法 直接看代码: <ext:GridPanel runat="server&qu ...
- 【Ext.Net学习笔记】04:Ext.Net中使用数据、Ext.Net Store的用法、Ext.Net ComboBox用法
之前的几篇文章都是介绍Ext.Net较为基础的东西,今天的这一篇将介绍数据的一些用法,包括XTemplate绑定数据.Store(Modal.Proxy).ComboBox的用法等. XTemplat ...
- 【Ext.Net学习笔记】03:Ext.Net DirectEvents用法详解、DirectMethods用法详解
Ext.Net通过DirectEvents进行服务器端异步的事件处理.[Ext.Net学习笔记]02:Ext.Net用法概览.Ext.Net MessageBus用法.Ext.Net布局 中已经简单的 ...
- 【Ext.Net学习笔记】01:在ASP.NET WebForm中使用Ext.Net
Ext.NET是基于跨浏览器的ExtJS库和.NET Framework的一套支持ASP.NET AJAX的开源Web控件,包含有丰富的Ajax运用,其前身是Coolite. 下载地址:http:// ...
随机推荐
- [iOS基础控件 - 5.2] 查看大图、缩放图片代码(UIScrollView制作)
原图: 900 x 1305 拖曳滚动: 缩放: 主要代码: // // ViewController.m // ImageZoom // // Created by ...
- os7新特性之生成二维码
先导入CoreImage.framework 生成二维码 读取二维码
- jQuery each的实现与call方法的详细介绍
转载原出处: http://www.f2es.com/jquery-each-intro/ 先贴上jquery实现each功能的源代码(把常用的call部分提取出来,为了方便理解,就进行了一定的修改) ...
- jquery完成带单选按钮的表格行高亮显示
jquery完成带单选按钮的表格行高亮显示 上篇博客写的是复选框的,这次写的是单选框的,有时查询的时候,只能选择一条记录,如果将选中的这条记录的行高亮显示,同时该行的单选按钮也被选中了,这样会提高用户 ...
- UI进阶 多线程
一.多线程概述 程序.进程.线程 程序:由源代码生成的可执行应用.(例如:QQ.app) 进程:一个正在运行的程序可以看做一个进程.(例如:正在运行的QQ就是一个进程),进程拥有独立运行所需的全部资源 ...
- Handlebar
1.Handlebar中文网: http://www.ghostchina.com/introducing-the-handlebars-js-templating-engine/ 2.http:// ...
- byte数组和int互转
import java.nio.ByteBuffer; public class Program { public static void main(String[] args) { ByteBuff ...
- ExtJs5.1.1使用中问题集锦
1.获取grid filter对象: grid.getStore().getFilters().items 2.获取grid filter后把filter对象转换成json格式字符串:grid.ge ...
- 第二周:01 ICP迭代交互
本周主要任务01:利用PCL库函数,ICP融合两个角度的点云 任务时间:2014年9月8日-2014年9月14日 任务完成情况:可以使用键盘交互,显示每次ICP迭代结果 任务涉及基本方法: 1.PCL ...
- Android选择系统相册或拍照上传
PhotoUtils.rar