几点说明
- 关于ExtJS的表单,我打算分为三个部分来写
- 常用表单控件及内置验证 —— 这里主要是JS代码
- 表单行为与Asp.NET页面的消息回复 —— 这里既有JS代码,与有C#代码,我主要是使用Asp.NET来写程序
- 表单控件的自定义验证与事件侦听
- 其实还应该有一块是关于ExtJS中「代理」的使用的,我打算单独来写。
- 这里使用的代码不可以直接复制运行,因为我们的环境多多少少会有一些不同,所以代码部分仅供参考。
代码运行结果
代码
IDE: VS2010 SP1
版本:3.4.0
操作系统:Windows 7 32位 旗舰版
后台Asp.NET页面代码『ExtJS』表单(一)常用表单控件及内置验证
代码说明
- 代码中的关键配置项我已经注释好了,注释的内容来自官方API文档,所以请对其正确性放心。
- 以下是我个人对这段代码的解释,仅供参考……
- Ext.QuickTips.init(); 这个是用于配合验证的,添加上这句话之后,就可以实现所谓的「气泡」提示了。
- var classesStore = new Ext.data.SimpleStore 这里我实例化了一个数据源(请暂且这么认为),目的是在之后给Combox绑定下拉数据项。
- url: '../jsonresponse.aspx' 这个 是指示将form提交到什么地方,又从什么地方获取到回复。
- 表单的常用控件,用于标注在 xtype 处:
- 文本框:textfield
- 数字文本框:numberfield
- 下拉列表:combo
- 单选按钮:radio —— 这里注意,我们可以指定多个同名的radio,从而达到从多个值中只能选择一个的效果
- 复选框:checkbox
- 日期选择:datefield
- disabledDays 配置项表示不可选择的日期,值为「0~6」,分别对应「周日~周六」
- 时间选择:timefield
- increment 配置顶表示间隔时间
- 文本域:textarea 或 htmleditor
- textarea 是纯文本编辑
- htmleditor 是富文本编辑器
- vtype 这个是验证用的,常用的是 email alpha(字符型)
- listeners 是控件事件的侦听器,有关内容请见官方文档,之后我也会整理出一个最简单的使用方法
其他
注意:这里只列出了表单的xtype所对应的组件,想要知道更多的,还是要到官方的API文档中查询。