1、认识Ext.form.Panel表单面板
- Ext.form.field.CheckBox 复选框 checkboxfield
- Ext.form.CheckBoxGroup 复选框组 checkboxgroup
- Ext.form.field.ComboBox 下拉列表框 combo
- Ext.form.field.Date 日期选择框 datefield
- Ext.form.field.Display 文本展示组件 displayfield
- Ext.form.FieldContainer 字段容器 fieldcontainer
- Ext.form.FieldSet 字段集 fieldset
- Ext.form.field.Hidden 隐藏域 hiddenfield
- Ext.form.field.HtmlEditor HTML文本编辑器 htmleditor
- Ext.form.Label 标签字段 label
- Ext.form.field.Number 数字选择框 numberfield
- Ext.form.field.Radio 单选框 radio
- Ext.form.field.RadioGroup 单选框组 radiogroup
- Ext.form.field.Spinner 微调组件 spinnerfield
- Ext.form.field.TextArea 多行文本框 textareafield
- Ext.form.field.Text 单行文本框 textfield
- Ext.form.field.Time 事件选择框 teimefield
- Ext.form.field.Trigger 触发按钮文本框 triggerfield
- Ext.form.field.File 文件上传字段 filefield
2、Ext.form.Panel主要配置项目表
- buttons Array 一个按钮(Ext.button.Button)配置对象的数组,按钮将被添加到表单的页脚当中 示例:buttons:[{text:"Button1"}]
- layout String 表单布局,默认为anchor
- minButtonWidth Number 表单按钮的最小宽度 默认为75px
- pollForChanges Boolean 是否循环检查表单值的变化
- pollInterval Number 循环检查表单的时间间隔,默认为500毫秒
- items Mixed 一个子元素或子元素的数组
- title String 表单标题
3、Ext.form.FormPanel常用方法表
- checkChange:void 强制检查表单每个字段是否发生了变化
- getForm():Ext.from.BasicForm 获取表单面板对应的基本表单对象
- load(Object options):void 加载表单内容,该方法是Ext.form.Basic-load的代理
- startPolling(Number interval):void 开始循环检查表单是否发生了变化 参数说明:循环管检查的时间,单位是毫秒
- stopPolling:void 停止startPolling启动的内置任务
- submit(Object options):void 提交表单内容,该方法是Ext.form.Basic-submit的代理
4、Ext.form.field.Base基础表单字段,及主要配置项目表
主要提供对表单一般功能的支持,包括默认事件的处理、渲染、公共功能的定义等表单的必须的属性。它通过混入(mixin)Ext.from.field.Field获得表单的处理和验证功能,通过混入(mixin)Ext.from.field.Labelable 获得了标签错误信息的显示功能。大多数情况下都是使用它的子类例如:Ext.form.field.Text、Ext.form.field.Checkbox 不是直接创建Ext.form.field.Base的实例。如果需要创建自定义的表单Ext.from.field.Base
- dirtyCls String 设置表单值被修改后的样式
- fieldCls String 设置表单字段的样式 默认为‘x-form-field‘
- foucsCls String 设置表单字段获得焦点时的样式 ‘x-form-foucs‘
- id String 控件的唯一标示,默认系统会自动生成一个唯一标示
- inputid String 这个id将会被应用于生成的input元素
- invalidText String 设置表单字段值无效并且没有提供信息时的文字
- inputType String 字段类型 默认为text
- name 字段名(字段提交到后台的名称)默认为undefined
- readOnly Boolean 设置字段是否是只读
5、混入Ext.form.field.Field
mixin:Ext.form.field.Field
- disabled Boolean true为禁用组件,禁用状态下的组件不能被提交
- submitValue 设置表单字段非禁用状态下是否提交表单值 默认为true
- validateOnChange 设置值在发生变化时,是否立即校验值的有效性 默认为true
- value 字段的初始化值
6、混入Ext.form.Labelable
mixin:Ext.form.Labelable
- activeError String 如果设置该值,组件在第一次被渲染时,该值被作为错误信息展示 默认为Undefined 组件创建之后可以通过 setActiveError或unsetActiveError进行修改
- activeErrorsTpl Ext.XTemplate 错误信息模板
- autiFitErrors Boolean 设置是否自动调节组件体的范围,以便在组件范围内显示‘side‘或‘under‘状态的错误信息,默认为true
- fieldLabel String 设置字段标签,它将同labelSparator一起被添加,它的位置决定于labelAlign,labelWidth和labelPad配置项,默认为undefined
- hideEmptyLabel Boolean 设置为true则自动隐藏内容为空的标签
- hideLabel 设置为true则完全隐藏表单标签(fieldLabel和labelSeparator)默认为false
- labelAlign String 设置表单标签fieldLabel的位置:left,right,top
- labelPad Number 设置表单标签和表单字段之间的空白距离,默认为5像素
- labelSeparator String 设置表单标签和表单字段之间的分隔符,默认为undefined
- lableStyle String 样式字符窜,默认为undefined
- labelWidth Number 设置表单标签的宽度 仅当labelAlign设置为left或right时生效,默认为100像素
- labelableRebderTpl Array/string/Ext.XTmplate 表单标签模板
- msTarget String 设置错误信息提示位置,包括:qtip:显示一个浮动的提示信息,title:显示一个浏览器的浮动提示信息,under:在字段下方显示一个提示信 息,side:在字段的右边显示一个提示信息,none:不显示提示信息,[element id]:直接将错误信息添加到指定的元素的innerHTML属性
- preventMark Boolean true则不显示错误信息 默认为false
创建表单
8、Ext.from.field.Text组件主要配置项目表
Ext.from.field.Text组件扩展自Ext.form.field.Base它是一个基本的文本输入字段,可以直接用来代替input type="text"
- allowBlank Boolean 是否允许为空,默认为true
- blankText String 验证失败后显示的提示信息
- disableKeyFilter Boollean 设置为true 则禁用键盘输入过滤
- emptyCls String 设置应用空字段的样式 默认是“x-form-empty-field”
- emptyText String 在一个空字段中默认显示的信息
- enableKeyEvents Boolean 是否启用按键事件代理 默认为false
- enforceMaxLength Boolean 是否强制限制输入的最大长度 默认为false
- grow Boolean 是否随着内容的增多而自动增长 默认为false
- growMax Number 字段生长的最大宽度,默认为800
- growMin Number 字段生长的最小宽度,默认为30
- makRe RegExp 一个输入掩码的正则表达式,它将过滤掉不匹配的键盘输入
- maxLength Number 允许输入的最大长度 默认为 Number.MAX_VALUE
- regex RexExp 一个用于验证的javascript正则表达式
- regexText String 正则表达式验证失败后的提示信息,默认为空
- selectOnFocus Boolean 文本框获取焦点的时候是否选中文字 默认为false
- stripChartsRe regExps 去除字符正则表达式,过滤掉不希望出现的字符
- validator Function 一个自定义的验证函数,当前值被传入,验证通过返回trur否则返回错误信息
- vtype String 一个自定义类型的名字
- vtypeText String 一个自定义的提示信息,用来代替vtype本身的提示信息
1 //登录表单 2 var form2_login = new Ext.form.Panel({ 3 title: "Ext.from.field.Text示例", //表单标题 4 bodyStyle: "padding:5 5 5 5", //表单边距 5 frame: true, //是否渲染表单 6 height: 150, // 高度 7 width: "auto", //宽度 8 renderTo: "form2", //渲染到 [element id] 9 defaultType: "textfield", //设置表单的默认类型 10 defaults: {//同意设置表单属性的默认属性 11 lableSeparator: ":", //分隔符 12 labelWidth: 50, //标签宽度 13 width: 150, //字段宽度 14 allowBlank: false, //是否允许为空 15 labelAlign: "left", //对齐方式 16 msgTarget: "side"//在字段右边显示一个提示信息 17 }, 18 items: [ 19 { 20 fieldLabel: "用户名", //显示的值 21 name: "userName", //name提交到后台的name 22 selectOnFocus: true, //获取焦点之后是否选中文本 23 regex: /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/, //邮箱的正则 24 regexText: "邮箱格式不正确"//验证错误之后的提示信息 25 }, 26 { 27 name: "password", 28 fieldLabel: "密码", 29 inputType: "password"//设置输入类型为password 30 } 31 ], 32 buttons: [ 33 { 34 text: "登录", 35 handler: function () { 36 form2_login.form.setValues({ userName: "[email protected]", password: "123456" }) 37 } 38 } 39 ] 40 41 }); //登录表单
登录表单
10、Ext.from.field.TextArea组件主要配置项目表
Ext.from.field.TextArea组件扩展自Ext.form.field.Text组件,可以直接用来代替input type="textarea", 基本的配置与Ext.from.field.Text相同,这里主要列出他的特殊的配置
- cols Number 设置textarea原始的cols属性,默认为4
- enterIsSpecial Boolean 设置是否允许输入控制字符
- growAppend String 默认追加一个新行
- growMax Number 字段伸展的最大高度,默认为1000
- growMin Number 字段伸张的最小高度,默认为60
- preventScrollbars Boolean 设置为true隐藏滚动条,默认为false
1 //Ext.from.field.TextArea示例 2 var from3_textarea = new Ext.form.Panel({ 3 title: "Ext.from.field.TextArea示例", //标题 4 bidyStyle: "padding:5 5 5 5 ", 5 frame: true, //是否渲染表单 6 height: 120, 7 width: "auto", 8 renderTo: "form3", //渲染到哪里 [element id] 9 items: [ 10 { 11 xtype: "textarea", 12 fieldLabel: "备注", //显示的文字 13 id: "form3_textarea_meno", //id 14 labelSeparator: ":", //分隔符 15 labelWidth: 60, //标签的宽度 16 width: 200//字段的宽度 17 } 18 ], 19 buttons: [ 20 { 21 text: "确定", 22 handler: getValues2 23 } 24 25 ] 26 }); //Ext.from.field.TextArea示例结束 27 28 29 function getValues() { 30 var meno = from3_textarea.getForm().findField("form3_textarea_meno"); //得到多行文本域组件的对象 31 alert(meno.getValue()); //取得控件值 32 } 33 34 function getValues2() { 35 var meno = from3_textarea.form.getValues(); 36 alert(meno); 37 }
Ext.from.field.TextArea示例
12、Ext.from.field.Number组件主要配置项目表
Ext.from.field.Number是一个数字输入组件,实现了自动的按键过滤盒数字验证
- allowDecimals Boolean 是否允许输入小数,默认为true
- autoStripChars Boolean 是否允许过滤掉不允许输入的字符,默认为false
- baseChars String 输入的有效数字集合,默认为"0123456789"
- decimalPrecision Number 输入字符的精度,默认保留小数点后2位
- step Number 步长,默认为1
1 //创建Ext.form.field.Number示例 2 var form4_number = new Ext.form.Panel({ 3 title: "Ext.form.field.Number示例", //标题 4 bodyStyle: "padding:5 5 5 5", 5 renderTo: "form4", 6 height: 150, 7 frame: true, 8 width: "auto", 9 defaultType: "numberfield", 10 defaults: { 11 lableSeparator: ":", 12 lableWidth: 50, 13 width: 200, 14 labelAlign: "left", 15 msgTarget: "side" 16 }, 17 items: [ 18 { 19 fieldLabel: "整数", 20 hideTrigger: true, //是否隐藏微调按钮 21 allowDecimals: false, //不允许输入小数 22 nanText: "请输入有效的整数"//无效数字提示 23 }, 24 { 25 fieldLabel: "小数", 26 allowDecimals: true, //允许输入小数 27 decimalPrecision: 2, //保留小数点后2位 28 nanText: "请输入有效的小数"//无效数字提示 29 }, 30 { 31 fieldLabel: "数字限制", 32 baseChars: "12345"//数字输入范围 33 }, 34 { 35 fieldLabel: "数值限制", 36 maxValue: 100, //最大值 37 minValue: 50//最小值 38 } 39 40 ] 41 42 }); //创建Ext.form.field.Number示例结束
创建Ext.form.field.Number示例
13、Ext.form.field.Picker主要配置项目表
Ext.form.field.Picker
通常不能被是实例化,而是使用它的子类,在子类中需要实现createPicker方法来创建于字段选择的一个拾取器组件.
ExtJs4.0中实现的拾取器组件共有三个,分别是:Ext.form.field.ComboBox(组合框)、
Ext.form.field.Date(日期选择控件)、Ext.form.field.Time(时间选择框)
- editable Boolean 设置为false不允许用户编辑,默认为true
- mathFieldWidth Boolean 拾取器是否自动匹配字段宽度,默认为true
- pickerAlign String 拾取器的对其位置,默认为“tl-bl?”
14、Ext.form.field.ComboBox主要配置项目表
Ext.form.field.ComboBox继承自Ext.form.field.Picker组件,它支持自动完成、远程加载数据、分页等属性它的配置在所有的组件中是比较复杂的。在一个实例中很难表达清楚,所以会在多个示例中展示。
- allQuery String 一个发往服务器的用来查询全部信息的字符串,默认为空字符串
- autoSelect Boolean 设置是否自动选择第一个列表项
- defaultListConfig Object
listConfig对象包括:emptyText:当输入的值在列表项中不存在的时候的提示信息,默认为空文本、loadingText:默认加载提示
为“Loadin…”、minWidth:70,下拉列表最小宽度为70像素、maxHeight:300,下拉列表最大高度为300像素、
shadow:"sides"默认的阴影显示位置 - delimiter String 在多选模式下用于分隔显示的分隔符
- displayField String 设置显示在下拉列表中的字段名
- valueField String 组合框的值字段
- forceSelection Boolean 设置输入的值是否必须是下列表中待选的值,true:输入的值必须要在列表中存在,默认为false
- listConfig Object 下拉列表配置对象,将其传递到Ext.view.BoundList的构造函数中
- minChars Number 下拉列表自动选择前用户需要输入的最小字符串数量,queryMode="remote" 默认为4;queryMode="local"默认为0;editable=false会使自动完成功能失效
- multiSelect Boolean 设置是否允许多选,多个选中项按delimiter配置项中的分隔符进行拼接,显示在字段红,默认为false
- pageSize Number 分页大小 设置下拉列表的的分页大小,如果大于0会在下拉列表的页脚位置自动创建一个分页组件。该项只在mode="remote"时生效
- queryDelay Number 设置从键入结束到发送查询之间的查询延迟时间 queryMode="remote"默认为500毫秒;queryMode="local"默认为10毫秒
- queryMode String 设置下拉列表框中数据读取模式 local:读取本地数据;remote:读取远程数据
- queryParam String 查询的名字,默认为“query”将被传递到查询字符串中
- selectOnTab Boolean 是否使用键盘的Tab键选择列表项,默认为true
- store Ext.data.Store/Array 列表项中绑定的数据,默认为undefined
- triggerAction 单击按钮时触发的默认操作,有效值包括 all和query,设置query会使用raw value进行查询,设置all会执行allQuery中的配置进行查询
- typeAhead Boolean 在输入过程中是否自动选择匹配的剩余部分文本,默认为false
- typeAheadDelay 设置输入过程汇总自动匹配剩余文本的延迟时间,默认为250毫秒
- valueNotFoundText String 值不存在时的提示信息
1 //Ext.form.field.ComboBox local 本地数据源 2 //创建数据模型 3 Ext.regModel("PostInfo", { 4 fields: [ 5 { name: "province" }, 6 { name: "post" } 7 ] 8 }); 9 10 ///创建组合框中显示的数据源 11 var postStore = Ext.create("Ext.data.Store", { 12 model: "PostInfo", 13 data: [ 14 { province: "北京", post: "100000" }, 15 { province: "通县", post: "101100" }, 16 { province: "昌平", post: "102200" }, 17 { province: "大兴", post: "102600" }, 18 { province: "密云", post: "101500" }, 19 { province: "延庆", post: "102100" }, 20 { province: "顺义", post: "101300" }, 21 { province: "怀柔", post: "101400" } 22 ] 23 }); 24 25 var form9_combobox_local = new Ext.form.Panel({ 26 title: "Ext.form.field.ComboBox local 本地数据源", 27 bodyStyle: "padding:5 5 5 5", 28 frame: true, 29 height: 100, 30 renderTo: "form9", 31 width: "auto", 32 defaults: { 33 labelSeparator: ":", 34 lableWidth: 60, 35 width: 200, 36 lableAlign: "left" 37 }, 38 items: [ 39 { 40 xtype: "combo", 41 listConfig: { 42 emptyText: "未找到匹配项", //当值不在列表项中的提示信息 43 maxHeight: 60//设置下列表中的最大高度为60像素 44 }, 45 name: "form9_combobox_local_post", 46 fieldLabel: "邮政编码", 47 triggerAction: "all", //单击触发按钮时显示全部信息 48 store: postStore, 49 displayField: "province", //显示的字段 50 valueField: "post", //value字段 51 queryMode: "local", //本地模式 52 forceSelection: true, //要求输入的值必须在列表中存在 53 typeAhead: true, //允许自动匹配 54 value: "102600"//默认选择项 55 } 56 ] 57 }); //Ext.form.field.ComboBox local 本地数据源结束
Ext.form.field.ComboBox local 本地数据源
1 //Ext.form.field.ComboBox remote 远程数据源 2 3 //常见数据模型 4 Ext.regModel("BookInfo", { 5 fields: [ 6 { name: "BookName" } 7 ] 8 }); 9 10 ///使用数据代理创建 数据源 11 var form10_data = Ext.create("Ext.data.Store", { 12 model: "BookInfo", 13 proxy: { 14 type: "ajax", //Ext.data.AjaxProxy 15 url: "../../../ajax/Ext.form.field/ComboBox.ashx", 16 reader: { 17 type: ‘json‘ 18 }, 19 writer: { 20 type: ‘json‘ 21 } 22 } 23 }); 24 25 var form10_combobox_remote = new Ext.form.Panel({ 26 title: "Ext.form.field.ComboBox remote 远程数据源", 27 frame: true, 28 height: 100, 29 width: "auto", 30 renderTo: "form10", 31 bodyStyle: "padding:5 5 5 5", 32 defaults: { 33 labelSeparator: ":", 34 labelWidth: 70, 35 Width: 200, 36 labelAlign: "left" 37 }, 38 items: [ 39 { 40 xtype: "combo", 41 fieldLabel: "书籍列表", 42 listConfig: { 43 loadingText: "正在加载书籍信息", 44 emptyText: "未找到匹配项", 45 maxHeight: 60 46 }, 47 allQuery: "allbook", //第一次加载点击触发时显示所有(key="searchbook" value="allbook"后台接收) 48 minChars: 3, //下拉列表中需要用户输入的最小字符的数量 49 queryDelay: 300, //延迟时间 50 queryParam: "searchbook", //输入值异步提交时 key="searchbook" value="输入的值" 51 triggerAction: "all", //单击触发按钮显示全部数据 52 store: form10_data, 53 displayField: "BookName", 54 valueField: "BookName", 55 queryMode: "remote" 56 } 57 ] 58 }); 59 60 //Ext.form.field.ComboBox remote 远程数据源结束
Ext.form.field.ComboBox remote 远程数据源
服务器
1 <%@ WebHandler Language="C#" Class="ComboBox" %> 2 3 using System; 4 using System.Web; 5 using System.Web.Script.Serialization; 6 using System.Collections.Generic; 7 using System.Linq; 8 9 public class ComboBox : IHttpHandler 10 { 11 private JavaScriptSerializer jss = new JavaScriptSerializer(); 12 private List<BookInfo> Data 13 { 14 get 15 { 16 List<BookInfo> list = new List<BookInfo>() 17 { 18 new BookInfo(){ BookName="java编程思想"}, 19 new BookInfo(){ BookName="javascript程序设计"}, 20 new BookInfo(){ BookName="c++编程思想"}, 21 new BookInfo(){ BookName="c++入门"}, 22 new BookInfo(){ BookName="c++程序设计"}, 23 new BookInfo(){ BookName="php程序设计"}, 24 new BookInfo(){ BookName="php入门"}, 25 new BookInfo(){ BookName="php从入门到精通"} 26 }; 27 return list; 28 } 29 } 30 31 32 public void ProcessRequest(HttpContext context) 33 { 34 context.Response.ContentType = "text/json"; 35 string result = string.Empty; 36 string bookName = context.Request["searchbook"]; 37 if (bookName.Equals("allbook")) 38 { 39 result = jss.Serialize(Data); 40 } 41 else 42 { 43 List<BookInfo> list = Data.Where(c => c.BookName.StartsWith(bookName)).ToList(); 44 result = jss.Serialize(list); 45 } 46 context.Response.Write(result); 47 } 48 49 public bool IsReusable 50 { 51 get 52 { 53 return false; 54 } 55 } 56 57 } 58 59 public class BookInfo 60 { 61 public string BookName { get; set; } 62 }
服务器端代码
25、Ext.form.field.Timer主要配置项目表
Ext.form.field.Timer扩展自Ext.form.field.Picker组件,是一个带下拉选择框的时间输入字段,并且具有自动的时间验证功能。
- altFormats String 多个时间输入格式组成的字符串
- format String 显示的格式 默认为 g:i A
- increment Number 在事件列表中两个相邻选项间的事件间隔
- invalidText String 再输入无效时间的时候的提示 默认"{value} is not a time"
- maxValue Date/String 列表中允许的最大时间,参数可以是javascript时间对象获字符串
- maxText String 输入的时间大于最大时间的时候给的提示
- minValue Date/String 列表中允许的最小时间,参数可以是javascript时间对象获字符串
- minText String 输入的时间小于最大时间的时候给的提示
- pickerMaxHeight Number 时间拾取器的最大高度,默认为300像素
- submitFormat String 设置提交到服务器的日期格式,默认为 format
- g 小时 12小时计数法 不带前缀0 1-12
- G 小时 24小时计数法 不带前缀0 0-23
- h 小时 12小时计数法 带前缀0 1-12
- H 小时 24小时计数法 带前缀0 0-23
- i 分钟,带前缀0 00-59
- s 秒钟,带前缀0 00-59
- a 午前午后的表示 小写表示 am pm
- A 午前午后的表示 大写表示 AM PM
- u 毫秒,带前缀0 001-999
1 //Ext.form.field.Timer 2 //使用create创建对象,而不是使用new关键字 3 var form11_timer = Ext.create("Ext.form.Panel", { 4 title: "Ext.form.field.Timer示例", 5 frame: true, 6 renderTo: "form11", 7 bodyStyle: "padding:5 5 5 5", 8 height: 100, 9 width: 300, 10 items: [ 11 { 12 fieldLabel: "时间选择器", 13 xtype: "timefield", 14 width: 200, 15 labelSeparator: ":", 16 msgTarger: "side", 17 autoFitErrors: false, //展示错误信息时是否自动调整字段组件宽度 18 maxValue: "18:00", 19 maxText: "时间应小于{0}", 20 minValue: "10:00", 21 minText: "时间应大于{0}", 22 pickerMaxHeight: 70, 23 increment: 60, //相隔60分钟 24 format: "G时i分s秒", 25 invalidText: "时间格式无效" 26 } 27 ] 28 }); //Ext.form.field.Timer结束
Ext.form.field.Timer
27、Ext.form.field.Date配置项目表
- altFormats String 多个时间输入格式组成的字符串
- disabledDates Array 禁止选择的日期组成的数组 说明:["03/08/2014","03/09/2014"]:禁止选择2014年3月8号和2014年3月9日;["03/08","03 /09"]:禁止选择每年的3月8日和3月9日;["03/../2014"]:禁止选择2014年的3月的任何一天;["^03"]:禁止选择任何年份 3月中的任何一天
- disabledDatesText String 选择禁选日期的时候给的提示
- disabledDays Array 禁止选择的星期0代表星期日,以次类推
- disabledDaysText String 择禁选星期的时候给的提示
- format String 日期显示的格式默认为 m/d/y
- invalidText String 再输入无效时间的时候的提示
- maxValue Date/String 列表中允许的最大时间,参数可以是javascript时间对象获字符串
- maxText String 输入的时间大于最大时间的时候给的提示
- minValue Date/String 列表中允许的最小时间,参数可以是javascript时间对象获字符串
- minText String 输入的时间小于最大时间的时候给的提示
- showTody boolean 设置是否显示”今天“选择按钮,默认为true
- submitFormat String 设置提交到服务器的日期格式,默认为 format
1 //Ext.form.field.Date 示例 2 var form12_date = Ext.create("Ext.form.Panel", { 3 title: "Ext.form.field.Date 示例", 4 frame: true, 5 height: 100, 6 width: "auto", 7 renderTo: "form12", 8 bodyPadding: 5, 9 items: [ 10 { 11 fieldLabel: "选择日期", 12 labelSeparator: ":", 13 xtype: "datefield", 14 msgTarget: "side", 15 autoFitErrors: false, 16 format: "Y年m月d日", 17 maxValue: "12/31/2014", 18 minValue: "01/01/2014", 19 disabledDates: ["2014年08月08日"],//设置的格式必须与 format格式相同,否则不会起作用 20 disabledDatesText: "禁止选择该日期", 21 disabledDays: [0, 6], //禁止选择周末 22 disabledDaysText: "禁止选择周末", 23 width: 320, 24 value: "12/31/2014" 25 } 26 ] 27 28 }); //Ext.form.field.Date 示例
Ext.form.field.Date 示例
28、Ext.form.field.Hidden 示例
该字段用于在表单中存储隐藏字段,因为是字段隐藏,该组件没有图形化的表现形式,可以直接用来替换html表单中的input type="hidden". 下图中的 年龄一栏被隐藏,但是并不会影响它的提交。
1 //Ext.form.field.Hidden 2 var form13_hidden = Ext.create("Ext.form.Panel", { 3 title: "Ext.form.field.Hidden示例", 4 frame: true, 5 bodyStyle: "padding:5 5 5 5", 6 height: 100, 7 width: "auto", 8 renderTo: "form13", 9 defaultType: "textfield", 10 defaults: { 11 labelSeparator: ":", 12 labelWidth: 70, 13 width: 200, 14 labelAlign: "left" 15 }, 16 items: [ 17 { 18 name: "username", 19 fieldLabel: "姓名" 20 }, 21 { 22 name: "age", 23 xtype: "hidden" 24 }, 25 { 26 name: "sex", 27 fieldLabel: "性别" 28 } 29 ] 30 }); //Ext.form.field.Hidden
Ext.form.field.Hidden
30、Ext.form.field.HtmlEditor配置项目表
是一个HTML文本编辑器
- createLinkText String 创建链接提示框中的默认提示信息
- defaultLinkValue String 创建连接的默认值,默认为http://
- defaultValue String 编辑器的默认值
- enableAlignments Boolean 是否启用左中右对齐按钮
- enableColors Boolean 是否启用背景色前景色按钮,默认为true
- enableFont boolean 是否启用 字体选择按钮,默认为true;在苹果浏览器中不被支持
- enableFontDSize boolean 是否启用字体调节器 默认为true
- enableFormat boolean 是否启用字体选择器 默认为true
- enableLinks boolean 是否启用创建链接按钮 默认为true
- enableSourceEdit boolean 是否启用代码编辑按钮 默认为true;在苹果浏览器中不被支持
- fontFamilies Array 一个字体数组
- buttonTips Object 编辑器工具按钮中的提示信息配置对象集合
1 ///Ext.form.field.HtmlEdit示例 2 var form14_htmledit = Ext.create("Ext.form.Panel", { 3 title: "Ext.form.field.HtmlEdit示例", 4 frame: true, 5 renderTo: "form14", 6 items: [ 7 { 8 fieldLable: "HTML编辑器", 9 xtype: "htmleditor", 10 value: "ExtJs4登场", 11 createLinkText: "创建超链接", 12 defaultLinkValue: "http://www.", //链接的默认格式 13 enableAlignments: true, //启用左 中 右 按钮 14 enableColors: true, 15 enableFont: true, 16 enableFontSize: true, 17 eaableFormat: true, 18 enableLinks: true, 19 enableLists: true, 20 enableSoureEdit: true, 21 fontFamilies: ["宋体", "隶书", "黑体", "微软雅黑"], 22 buttonTips: { 23 bold: { 24 title: "Bold (Ctrl + B)", 25 text: " 粗体" 26 }, 27 italic: { 28 title: "italic (Ctrl + I)", 29 text: " 斜体" 30 }, 31 underline: { 32 title: "underline (Ctrl + U)", 33 text: " 下划线" 34 }, 35 increasefontsize: { 36 title: "Grow Text", 37 text: " 增大字体" 38 }, 39 decreasefontsize: { 40 title: "Shrink Text", 41 text: "缩小字体" 42 }, 43 backcolor: { 44 title: "Text Heightlight Color", 45 text: "背景色" 46 }, 47 forecolor: { 48 title: "font color", 49 text: "前景色" 50 }, 51 justifyleft: { 52 title: "Align text left", 53 text: "左对齐" 54 }, 55 justifycenter: { 56 title: "Align text center", 57 text: "居中对齐" 58 }, 59 justifyright: { 60 title: "Align text right", 61 text: "具有对齐" 62 }, 63 insertunorderedlist: { 64 title: "Bullet list", 65 text: "项目符号" 66 }, 67 insertorderedlist: { 68 title: "Numbered list", 69 text: "数字符号" 70 }, 71 createlink: { 72 title: "Hyperlink", 73 text: "超链接" 74 }, 75 sourceedit: { 76 title: "source edit", 77 text: "切换代码编辑模式" 78 } 79 80 } 81 82 } 83 ] 84 }); ///Ext.form.field.HtmlEdit示例
Ext.form.field.HtmlEdit示例
32、Ext.form.field.Display 只读文本字段
1 . htmlEncode Boolean 设置对展示的内容是否进行html编码 默认为false
1 //Ext.form.field.Display 2 var form15_display = Ext.create("Ext.form.Panel", { 3 title: "Ext.form.field.Panel", 4 width: 200, 5 frame: true, 6 renderTo: "form15", 7 bodyPadding: 5, 8 items: [ 9 { 10 fieldLabel: "展示字段", 11 xtype: "displayfield", 12 value: "<b>ExtJs4登场</b>", 13 labelWidth: 70, 14 labelSeparator: ":" 15 } 16 ] 17 }); //Ext.form.field.Display
Ext.form.field.Display
1 //Ext.form.field.Display 2 var form15_display = Ext.create("Ext.form.Panel", { 3 title: "Ext.form.field.Panel", 4 width: 200, 5 frame: true, 6 renderTo: "form15", 7 bodyPadding: 5, 8 items: [ 9 { 10 fieldLabel: "展示字段", 11 xtype: "displayfield", 12 value: "<b>ExtJs4登场</b>", 13 labelWidth: 70, 14 labelSeparator: ":" 15 } 16 ] 17 }); //Ext.form.field.Display
Ext.form.field.Display
34、Ext.form.Label标签字段
- forId String 设置与标签地段进行关联的目标组件的inputid
- HTML String 设置显示子啊标签字段的innerhtml
- text String 标签的文本
35、Ext.form.field.Fiel文件上传字段
- buttonConfig Object 按钮配置项
- buttonMargin Number 设置按钮与文本之间的距离 默认为3像素,只有在buttonOnly=false时生效
- buttonOnly booleab 设置是否只显示上传按钮,设置true文本框则不显示出来默认为false
- buttonText string 设置按钮文字 默认为‘Browse……’
1 //Ext.form.field.File 示例 2 var form16_file = Ext.create("Ext.form.Panel", { 3 title: "Ext.form.field.File 示例", 4 frame: true, 5 bodyPadding: 5, 6 width: 500, 7 height: 100, 8 renderTo: "form16", 9 defaults: { 10 labelSeparator: ":", 11 lableWidth: 70, 12 width: 200, 13 allowBlank: false, //不允许为空 14 labelAlign: "left", 15 msgTarget: "side" 16 }, 17 items: [ 18 { 19 xtype: "filefield", 20 name: "photo", 21 fieldLabel: "照片", 22 anchor: "100%", 23 buttonText: "选择照片" 24 } 25 ], 26 buttons: [ 27 { 28 text: "上传文件", 29 handler: function () { 30 var formObj = form16_file.getForm(); 31 if (formObj.isValid()) { //是否通过验证 32 form.submit({ 33 url: "/ajax/Ext.form.field/File.ashx", 34 waitMsg: "正在上传文件,请稍后……", 35 succuss: function (fp, o) { 36 Ext.Msg.alert("提示", "你的照片文件‘" + o.result.files + "‘已经上传!"); 37 }, 38 failed: function () { 39 Ext.Msg.alert("提示", "上传失败!"); 40 } 41 }); 42 } 43 44 } 45 } 46 ] 47 48 }); //Ext.form.field.File 示例
Ext.form.field.File 示例
后台代码
1 <%@ WebHandler Language="C#" Class="File" %> 2 3 using System; 4 using System.Web; 5 6 public class File : IHttpHandler 7 { 8 9 public void ProcessRequest(HttpContext context) 10 { 11 context.Response.ContentType = "text/plain"; 12 string result = "{success:true,files:‘sfsfsfs‘}"; 13 context.Response.Write(result); 14 } 15 16 public bool IsReusable 17 { 18 get 19 { 20 return false; 21 } 22 } 23 24 }
后端代码