首页 > 代码库 > ExtJs 第二章，Ext.form.Basic表单操作
ExtJs 第二章，Ext.form.Basic表单操作
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提交到后台的name22 selectOnFocus: true, //获取焦点之后是否选中文本23 regex: /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/, //邮箱的正则24 regexText: "邮箱格式不正确"//验证错误之后的提示信息25 },26 {27 name: "password",28 fieldLabel: "密码",29 inputType: "password"//设置输入类型为password30 }31 ],32 buttons: [33 {34 text: "登录",35 handler: function () {36 form2_login.form.setValues({ userName: "xulei@com", 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", //id14 labelSeparator: ":", //分隔符15 labelWidth: 60, //标签的宽度16 width: 200//字段的宽度17 }18 ],19 buttons: [20 {21 text: "确定",22 handler: getValues223 }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 }
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示例结束
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 本地数据源结束
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 = http://www.mamicode.com/Ext.create("Ext.data.Store", {12 model: "BookInfo",13 proxy: {14 type: "ajax", //Ext.data.AjaxProxy15 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: 6046 },47 allQuery: "allbook", //第一次加载点击触发时显示所有（key="searchbook" value="http://www.mamicode.com/allbook"后台接收）48 minChars: 3, //下拉列表中需要用户输入的最小字符的数量49 queryDelay: 300, //延迟时间50 queryParam: "searchbook", //输入值异步提交时 key="searchbook" value="http://www.mamicode.com/输入的值"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 远程数据源结束
服务器
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 : IHttpHandler10 {11 private JavaScriptSerializer jss = new JavaScriptSerializer();12 private List<BookInfo> Data13 {14 get15 {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 else42 {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 IsReusable50 {51 get52 {53 return false;54 }55 }56 57 }58 59 public class BookInfo60 {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结束
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 示例
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
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示例
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
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
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 示例
后台代码
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 IsReusable17 {18 get19 {20 return false;21 }22 }23 24 }
ExtJs 第二章，Ext.form.Basic表单操作