22-Ext中的表单(Ext.form.BasicForm)
- 如果要使用院士方式提交表单可以覆盖表单的onSubmit及Submit方法
代码如下:
var myForm = new Ext.form.BasicForm('form-el-id',{
onSubmit: Ext.emptyFn, //覆盖onSubmit方法为空函数
submit: function(){ //覆盖submit方法
this.getEl().dom.submit(); //调用底层表单元素的submit方法进行表单提交
}
})
- Ext.form.BasicForm主要配置项目表
配置项
类 型
说 明
baseParams
Object
传递到请求中的参数,例如:{id: '123', foo: 'bar'}
errorReader
DataReader
当表单提交时用来读取错误信息的数据读取器,这不是一个必选项,
在表单内部已经内建了一个Json格式的数据读取器fileUpload
Boolean
设置表单是否进行文件上传
method
String
设置表单的提交方式,有效值包括GET和POST
reader
DataReader
设置当表单执行load操作读取数据时的数据读取器,这不是必选项,
在表单内部已经内建了一个Json格式的数据读取器timeout
Number
设置表单动作的超时时间
trackResetOnLoad
Boolean
设置为true则在表单初次创建时将清除最近一次加载的数据或
使用setValues()设置数据url
String
设置表单执行请求时默认的提交路径
waitMsgTarget
Mixed
默认情况下,表单在执行动作过程中的等待提示框是一个
Ext.MessageBox.wait组件,通过该属性可以制定其他目标元素
- Ext.form.BasicForm主要方法表
方法名
说 明
clearInvalid() : BasicForm
清除表单中所有的无效验证信息
doAction(String/Object actionName, [Object options]) : BasicForm
执行一个预定的动作(Ext.form.Action.Submit或Ext.form.Action.Load)
或者自定义的扩展自Ext.form.Action的动作,
以执行一个特殊的请求处理findField(String id) : Field
通过id, dataIndex, name, hiddenName 查找表单字段
isDirty() : Boolean
如果表单在第一次读取后被更改过将返回true
isValid() : Boolean
如果客户端验证成功将返回true
load(Object options) : BasicForm
执行表单读取动作.
配置对象options将被传递到action(动作)中,细节参考doAction配置项loadRecord( Record record ) : BasicForm
从一个数据记录(Ext.data.Record)中读取数据到表单中
markInvalid( Array/Object errors ) : BasicForm
成批设置表单字段为验证无效
,参数可以是数组[{id : 'fieldId', msg : 'The message'}...],
或者json对象{id : msg, id2 : msg2}reset() : BasicForm
重置表单
setValues( Array/Object values ) : BasicForm
成批设置表单字段,
参数可以是数组 [{id : 'name', value : 'tom'}, {id : 'age', value : '24'}],
也可以是一个json对象{id:value, id2:value2}submit(Object options) : BasicForm
执行表单提交动作
配置对象options将被传递到action(动作)中,细节参考doAction配置项updateRecord( Record record ) : BasicForm
持久化表单数据到记录集中
注: 上表列举了主要的Ext.form.BasicForm方法, 这些方法继承到FormPanel中,FormPanel中可以直接使用这些方法
- Ext.form.FormPanel支持的主要表单组件(最下面的)
xtype 类Class 说明
------------- ------------------ ----------------------------
box Ext.BoxComponent
button Ext.Button
colorpalette Ext.ColorPalette
component Ext.Component
container Ext.Container
cycle Ext.CycleButton
dataview Ext.DataView
datepicker Ext.DatePicker
editor Ext.Editor
editorgrid Ext.grid.EditorGridPanel
grid Ext.grid.GridPanel //表格组建
paging Ext.PagingToolbar
panel Ext.Panel
progress Ext.ProgressBar
splitbutton Ext.SplitButton
tabpanel Ext.TabPanel //页签
treepanel Ext.tree.TreePanel //树形面板
viewport Ext.ViewPort
window Ext.WindowToolbar components 工具条组件
--------------------------------------- -------------------------------------------
toolbar Ext.Toolbar
tbbutton Ext.Toolbar.Button
tbfill Ext.Toolbar.Fill
tbitem Ext.Toolbar.Item
tbseparator Ext.Toolbar.Separator
tbspacer Ext.Toolbar.Spacer
tbsplit Ext.Toolbar.SplitButton
tbtext Ext.Toolbar.TextItem
Form components 表单组件
--------------------------------------- ----------------------------------------
form Ext.FormPanel
checkbox Ext.form.Checkbox 复选框
combo Ext.form.ComboBox 下拉列表框
datefield Ext.form.DateField 日期选择框
field Ext.form.Field
fieldset Ext.form.FieldSet
hidden Ext.form.Hidden 隐藏域
htmleditor Ext.form.HtmlEditor HTML文本编辑器
numberfield Ext.form.NumberField 数字输入框
radio Ext.form.Radio 单选按钮
textarea Ext.form.TextArea 文本域
textfield Ext.form.TextField 单行文本框
timefield Ext.form.TimeField 时间选择器
trigger Ext.form.TriggerField 触发按钮文本框 - Ext.form.FormPanel主要配置项目表
配置项
类 型
说 明
buttons Array 一个按钮(Ext.Button)配置对象的数组,按钮将被添加到表单页脚中 buttonAction String 按钮的对其方式, 有效值包括: left, center 和right, 默认值为center footer Boolean 是否创建表单页脚 header Boolean 是否创建表单标题栏,如果设置了title属性则会自动创建标题栏 headerAsTest Boolean 在标题栏(header)中是否显示title, 默认为true items Mixed 一个子元素或子元素的数组 labelAlign String 表单标签对齐方式,有效值包括left, top, 和right, 默认为left.如果当前表单包含子容器,
并且在子容器中没有设置该属性,则该属性的直至会级联到子容器中labelWidth Number 表单标签的宽度 title Stirng 表单标题
- Ext.form.FormPanel常用方法表
方法名 说明 getForm() : Ext.form.BasicForm 获取表单面板对应的基本表单对象 load( Object options ) : void 加载表单内容,该方法是Extform.BasicForm.load的代理,
,细节参考doAction配置项startMonitoring() : void 开始监控表单的有效状态 stopMonitoring() : void 停止监控表单的有效状态
- Ext.form.Field表单字段
--- Ext.form.Field是表单字段的基类, 它扩展自Ext.Box.Component,其他表单字段都需要从Ext.form.Field类进行扩展,
如:Ext.form.TextField, Ext.form.Checkbox, Ext.form.Hidden 都是扩展来的表单字段组件
--- 下表列出Ext.form.Field的主要配置项目,和常用方法 , 这些配置项将被其子类继承
配置项
类 型
说 明
name String 字段名 id String 控件的唯一标识,默认系统会自动生成一个唯一标识 value String 字段的初始化值 readOnly Boolean 是否只读,默认为false validateOnBlur Boolean 字段在失去焦点时是否被验证,默认为true validationDelay Number 验证的延时时间,以毫秒为单位,默认为250 disabled Boolean 设置字段是否可用,默认为false fieldLabel String 字段对应的标签说明,默认为空白字符串('') hideLabel Boolean 是否隐藏字段标签,默认为false hideMode String 有效值包括visibility, offsets(偏移), display hideParent Boolean 设置为true则显示或隐藏组件的容器.默认为false labelSeparator String 字段标签与字段之间的分割符,默认为':', 这项设置会覆盖
Ext.form.FormPanel中的对应配置项msgTarget String 设置错误信息显示的位置, 有效值包括:
- qtip: 显示一个浮动的提示信息
- title: 显示一个浏览器的浮动提示信息
- under: 在字段下方显示一个提示信息
- side:在字段右边显示一个提示信息
注:可以统一设置提示信息
Ext.QuickTips.init();//初始化提示信息
Ext.form.Field.prototype.msgTarget="side";//让提示信息在边上显示
- Ext.form.TextField文本区
--- 它扩展自Ext.form.Field类, 它是一个基本的文本输入字段
--- Ext.form.TextField主要配置项目表
配置项
类 型
说明
allowBlank
Boolean
是否允许为空,默认为true
blankText
String
是否允许为空验证失败后显示的提示信息
emptyText
String
在一个空字段中默认显示的信息
grow
Boolean
设置字段是否根据内容字段进行伸展和收缩,默认为false
growMax
Number
字段伸展的最大宽度,默认为800
growMin
Number
字段伸缩的最小宽度,默认为30
inputType
String
字段类型,默认为text,还可是:image,password,或者file
maxLength
Number
字段允许输入的最大长度
maxLengthText
String
最大长度验证失败后显示的提示信息
minLength
Number
字段允许输入的最小长度
minLengthText
String
最小长度验证失败后显示的提示信息
regex
String
一个javascript正则表达式对象
regexText
String
正则表达式验证失败后显示的提示信息,默认为空('')
selectOnFocus
Boolean
设置当字段得到焦点时是否自动选择已存在的文本,默认为false
vtype
String
一个验证类型的名字,清参考Ext.Form.Vtypes
vtype的值有: 1.alpha,只能输入英文字母
2.alphanum,只能输入英文字母和数字
3.email,电子邮件
4.url,网址
vtypeText
String
一个自定义的提示信息,用来代替vtype本身的错误提示信息
validator
Function
一个自定义验证函数,默认为(null),这个函数将在所有基本验证通过之后被调用
- Ext.form.TextArea多行文本域
配置项
类型
说明
prventScrollbars
Boolean
设置当文本内容溢出时是否显示滚动条,设置为true则隐藏滚动条,
相当于设置overflow:hidden, 默认为false
- Ext.form.Number数字输入框
配置项
类 型
说 明
allowDecimals Boolean 是否允许输入小数,默认为true allowNegative Boolean 是否允许输入负数,默认为true baseChars String 输入的有效数字集合,默认为:'0123456789' decimalPrecision Number 输入数字的精度,默认保留小数点后2位 decimalSeparator String 十进制分割符,默认为'.' maxValue Number 允许输入的最大数值 maxText String 输入值超过最大值之后的提示信息 minValue Number 允许输入的最小数值 minText String 输入小于最小数值的提示信息 manText String 输入非有效数值之后的提示信息
- Ext.form.CheckBox复选框与Extform.Radio单选框
--- Ext.form.CheckBox主要配置项目表
配置项
类 型
说 明
boxLabel
String
紧靠复选框的文字描述
checked
Boolean
设置复选框默认是否被选中,默认为false
--- 关于CheckBox和Radio的布局
示例:
Ext.onReady(function(){
var _formPanel = new Ext.FormPanel({
title:'点选按钮与复选框布局',
bodyStyle:'padding:5',
width:650,
height:300,
labelWidth:50,
frame:true,
applyTo:'hello',
items:[ {
xtype: 'checkboxgroup', //这里采用了xtype:'checkboxgroup'
fieldLabel: '爱好',
columns: [155,155,155], //两排排列 这样可以设置其宽度 和列数 去掉该参数 则横排排列
items: [
{boxLabel: '游泳', name: 'cb-custwidth', inputValue: 1},
{boxLabel: '洗澡', name: 'cb-custwidth', inputValue: 2, checked: true},
{boxLabel: '散步', name: 'cb-custwidth', inputValue: 3}
]
},{
xtype: 'checkboxgroup',
fieldLabel: '爱好',
columns:2, //单个数字可以设置列数
items: [
{boxLabel: '游泳', name: 'cb-custwidth', inputValue: 1},
{boxLabel: '洗澡', name: 'cb-custwidth', inputValue: 2, checked: true},
{boxLabel: '散步', name: 'cb-custwidth', inputValue: 3}
]
},{
xtype: 'radiogroup', //使用了radiogroup
fieldLabel: '爱好',
//columns:2, //单个数字可以设置列数
items: [
{boxLabel: '游泳', name: 'cb-custwidth', inputValue: 1},
{boxLabel: '洗澡', name: 'cb-custwidth', inputValue: 2, checked: true},
{boxLabel: '散步', name: 'cb-custwidth', inputValue: 3}
]
}]
});
});
-
Ext.for.TriggerField触发字段
--- Ext.form.TriggerField组件扩展自Ext.form.TextField组件,增加了一个可以单击的触发按钮,这个触发按钮没有默认的动作,
必须指派处理函数
配置项
类 型
说 明
hideTrigger Boolean 是否隐藏触发按钮,默认为false triggerClass String 应用于触发按钮上的样式 onTriggerClick Function 触发函数
-
Ext.form.ComboBox组合框
配置项
类 型
说 明
allQuery
String
一个法网服务器用来查询全部信息的自负串，默认为空字符串('')
displayField
String
一个被显示在下拉框中的字段名
editable
Boolean
设置下来框是否可以进行编辑,默认为true,如果设置为false则效果相当与一个传统的选择(select)框
forceSelection
Boolean
设置输入值是否是严格为带选列表中存在的值,
true则要求输入值必须在列表中存在,
false则允许用户输入任何值,默认为falsehandleHeight
Number
下拉列表中拖动手柄的高度,默认为8,只在resizable配置项为true时才生效
hiddenName
String
隐藏字段的名字,如果提供该参数则一个隐藏字段将被创建,用来存储所选值,
当表单提交时在服务器端可以通过该名字取得列表中的所选值lazyInit
Boolean
延时初始化下拉列表,默认为true,当下拉框得到焦点才会初始化下拉列表
listAlign
String
列表的对其方式
lazyRender
Boolean
延时渲染,默认为false
listClass
String
应用在下拉列表元素上的样式
listWidth
Number
下俩列表的宽度,默认为下拉框的宽度
loadingText
String
当下拉框加载数据时显示的提示信息,只有当mode='remote'时才会生效
maxHeight
Number
下拉列表框的最大高度,默认为300(像素)
minChars
Number
下拉列表框自动选择前用户需要输入的最小字符数量
mode='remote' 默认为4
mode='local' 默认为0
editable=false会使自动完成功能失效minListWidth
Number
设置下拉列表的最小宽度,默认为70(像素),如果listWidth的宽度大于最小宽度,
则该项设置将会被忽略mode
String
设置下拉列表框的数据读取模式
local:本地
remote:远程pageSize
Number
设置下拉列表框的分页大小.如果大于0则在下拉列表的页脚位置会自动创建一个分业工具栏
该项只有在mode='remote'时生效queryDelay
Number
设置从键入自负结束到发送查询之间的查询延时时间
mode='remote' 默认为500(毫秒)
mode='local'默认为10(毫秒)queryParam
String
查询的名字,默认为'query',将被传递到查询字符串中
selectOnFocus
Boolean
当获取焦点时立刻选择一个已经存在的列表项,默认为false,
此项只有在editable=true时才会生效store
Ext.data.Store
列表框绑定的数据源,默认为空(undfined)
title
String
如果设置该项,则会为下拉列表创建头部元素
transform
Mixed
将页面中已存在元素转换为组合框
triggerAction
String
设置单击触发按钮时执行的默认操作,有效值包括'all'和'query'
默认为'query' ,如果设置值为'all'则会执行allQuery中设置的查询typeAhead
Boolean
设置在输入过程中是否自动选择配置的剩余部分文本,默认为false
typeAheadDelay
Number
设置输入过程中自动匹配剩余文本的延时时间,默认为250毫秒
value
String
初始化组合框中的值
valueField
String
组合框的值字段
valueNotFoundText
String
值不存在时显示的提示信息
emptyText
Stirng
值为空的时候在文本框中显示的的提示信息
resizable
Boolean
是否可以改变下拉框的大小
ComboBox示例1:(本地数据源的组合框)
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';
var store = new Ext.data.SimpleStore({ //定义组合框中显示的数据源
fields: ['province', 'post'],
data : [['北京','100000'],['通县','101100'],['昌平','102200'],
['大兴','102600'],['密云','101500'],['延庆','102100'],
['顺义','101300'],['怀柔','101400']]
});
var form = new Ext.form.FormPanel({
title:'Ext.form.ComboBox本地数据源示例',
labelSeparator :'：', //分隔符
labelWidth : 80, //标签宽度
bodyStyle:'padding:5 5 5 5', //表单边距
frame : true,
height:100,
width:270,
applyTo :'form',
items:[
new Ext.form.ComboBox({
id:'post',
fieldLabel:'邮政编码',
triggerAction: 'all', //单击触发按钮显示全部数据
store : store, //设置数据源
displayField:'province', //定义要显示的字段
valueField:'post', //定义值字段
mode: 'local', //本地模式
forceSelection : true, //要求输入值必须在列表中存在
resizable : true, //允许改变下拉列表的大小
typeAhead : true, //允许自动选择匹配的剩余部分文本
value:'102600', //默认选择大兴
handleHeight : 10 //下拉列表中拖动手柄的高度
})
]
})
});
ComboBox示例2:(远程数据源的组合框)
//客户端代码
Ext.onReady(function(){
Ext.QuickTips.init();
var store = new Ext.data.SimpleStore({
proxy : new Ext.data.HttpProxy({ //读取远程数据的代理
url : 'http://localhost:8080/test/test_ajax.do' //远程地址
}),
fields : ['bookName'] //字段
});
var form = new Ext.form.FormPanel({
title:'Ext.form.ComboBox远程数据源示例',
labelSeparator :'：', //分隔符
labelWidth : 80, //标签宽度
bodyStyle:'padding:5 5 5 5', //表单边距
frame : true,
height:100,
width:300,
applyTo :'hello',
items:[
new Ext.form.ComboBox({
id:'book',
allQuery:'allbook', //查询全部信息的查询字符串
loadingText : '正在加载书籍信息', //加载数据时显示的提示信息
minChars : 3, //下拉列表框自动选择前用户需要输入的最小字符数量
queryDelay : 300, //查询延迟时间
queryParam : 'searchbook', //查询的名字
fieldLabel:'书籍列表',
triggerAction: 'all', //单击触发按钮显示全部数据
store : store, //设置数据源
displayField:'bookName', //定义要显示的字段
mode: 'remote' //远程模式,
})
]
})
});
//服务器代码(struts Action) --- 服务器程序用于生成满足客户端组合框需求的数据,格式为:[['a'],['b'],['c']]
response.setCharacterEncoding("UTF-8"); //解决中文乱码问题
System.out.println("===============来了===============");
String bookName = request.getParameter("searchbook");
String jav = "['java编程思想'],['java入门'],['javascript程序设计']";
String cpp = "['c++编程思想'],['c++入门'],['c++程序设计']";
String php = "['php程序设计'],['php入门'],['php从入门到精通']";
String books = "";
if(bookName.equals("allbook")){
books = "["+jav+","+cpp+","+php+"]";
response.getWriter().write(books);
}else{
bookName = bookName.substring(0,3);//取查询字符串的前3个字符
System.out.println(bookName);
if(bookName.equals("jav")){
books = "["+jav+"]";
}else if(bookName.equals("c++")){
books = "["+cpp+"]";
}else if(bookName.equals("php")){
books = "["+php+"]";
}else{
books = "[['没有数据']]";
}
response.getWriter().write(books);
System.out.println(books);
}
return null;
ComboBox示例3:(带分页功能的组合框示例)
//客户端代码
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';
Ext.QuickTips.init();
var store = new Ext.data.JsonStore({
url : 'bookSearchServerPage.jsp', //远程地址
totalProperty : 'totalNum',
root : 'books',
fields : ['bookName']
});
var form = new Ext.form.FormPanel({
title:'Ext.form.ComboBox分页示例',
labelSeparator :'：',//分隔符
labelWidth : 80,//标签宽度
bodyStyle:'padding:5 5 5 5',//表单边距
frame : true,
height:100,
width:270,
applyTo :'form',
items:[
new Ext.form.ComboBox({
id:'book',
width:233,
fieldLabel:'书籍列表',
store : store, //设置数据源
allQuery:'allbook', //查询全部信息的查询字符串
triggerAction: 'all', //单击触发按钮显示全部数据
listWidth : 233, //指定列表宽度 为了将分页工具栏全部显示出来
editable : false, //禁止编辑
loadingText : '正在加载书籍信息', //加载数据时显示的提示信息
displayField:'bookName', //定义要显示的字段
mode: 'remote', //远程模式
pageSize : 3 //分页大小
})
]
})
});
//服务器端代码 --- 因为在分业过程服务器将向页面返回包含总条目数和当前页明晰的符合数据,
所以要采用json格式作为服务器与客户端交换的标准
response.setCharacterEncoding("UTF-8");
System.out.println("===============来了===============");
String bookName = request.getParameter("query");
int start = Integer.parseInt(request.getParameter("start")); //分页开始元素的数组下标值从零开始
int limit = Integer.parseInt(request.getParameter("limit")); //每页的大小
int start = Integer.parseInt(request.getParameter("start"));
int limit = Integer.parseInt(request.getParameter("limit"));
String [] booksArray = {"java编程思想","java入门","javascript程序设计",
"c++编程思想","c++入门","c++程序设计",
"php程序设计","php入门","php从入门到精通"};
StringBuffer books = new StringBuffer();
books.append("{totalNum:'"+booksArray.length+"',")
.append("books:[");
if(bookName.equals("allbook")){
for(int i= start; i<start+limit;i++){
books.append("{bookName:'"+booksArray[i]+"'}");
if(i != (start+limit-1)){
books.append(",");
}
}
books.append("]}");
System.out.println(books.toString());
response.getWriter().write(books.toString());
}else{
response.getWriter().write("[totalNum:0,books:['数据不存在']]");
}
return null;
ComboBox示例4:(转换一个HTML标准select为combobox)
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';
var form = new Ext.form.FormPanel({
title:'转换select组件为Ext.form.ComboBox的示例',
labelSeparator :'：',
labelWidth : 80,
bodyStyle:'padding:5 5 5 5',
frame : true,
height:80,
width:270,
applyTo :'div1'
items:[
new Ext.form.ComboBox({
name:'level',
fieldLabel:'职称等级',
lazyRender : true, //这里必须设置lazyRend er:true 否则不能正差显示
triggerAction: 'all', //单击触发按钮显示全部数据
transform : 'levelName'
})
]
})
}); - Ext.form.TimeField时间选择框
--- 主要配置项目表
配置项
类型
说明
altFormats String 多个时间输入格式组成的字符串,不同的格式之间使用|进行分割.
将使用这些格式来解析用户的输入信息,
默认值为:'g:ia|g:iA|Gi a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H'format String 显示格式,默认为'g:i A' maxValue Date/String 列表中允许的最大时间,参数可以是javascript日期对象或字符串 maxText Stirng 当时间大于最大值时的错误提示信息 minVAlue Date/String 列表中允许的最小时间,参数可以是javascript日期对象或字符串 minText String 当时间小于最大值时的错误提示信息 increment Number 在时间类表中两个相邻选项见的时间间隔,默认为15分钟 invalidText String 不符合altFormats的提示
示例代码:
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';//统一指定错误信息提示方式
var form = new Ext.form.FormPanel({
title:'Ext.form.TimeField示例',
labelSeparator :'：',//分隔符
labelWidth : 80,//标签宽度
bodyStyle:'padding:5 5 5 5',//表单边距
frame : true,
height:100,
width:300,
applyTo :'form',
items:[
new Ext.form.TimeField({
id:'time',
width : 150,
maxValue : '18:00', //最大时间
maxText : '所选时间应小于{0}', //大于最大时间的提示信息
minValue : '10:00', //最小时间
minText : '所选时间应大于{0}', //小于最小时间的提示信息
maxHeight : 70, //下拉列表的最大高度
increment : 60, //时间间隔为60分钟
format : 'G时i分s秒', //G标示为24时计时法
invalidText :'时间格式无效', //格式无效提示
fieldLabel:'时间选择框'
})
]
})
});
- Ext.form.DateField日期选择框
--- 扩展自Ext.form.TriggerField组件
--- 主要配置项目表
配置项
类型
说明
altFormats
String
多个日期输入格式租车个的自负串,不同格式之间用"|"进行分割.
将使用这些格式来解析用用的输入信息.
默认值为:'m/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d'disabledDates
Array
禁止选择的日期组成的数组,配置格式见下表,
disabledDates的格式设置必须要与format的格式相同disabledDatesText
String
选择禁选日期时的提示信息
disabledDays
Arrat
选择禁选的兴起组成的数组, 0代星期日, 1代表星期一,以此类推,
默认值为空disabledDaysText
String
选择禁选日期时的提示信息
format
String
日期显示格式,默认为:"m/d/y"
maxValue
Date/String
允许选择的最大日期
设置的格式要与altFormats中的默认格式相同maxText
String
选择禁选日期时的提示信息
minValue
Date/String
允许选择的最小日期
设置的格式要与altFormats中的默认格式相同minText
String
选择禁选日期时的提示信息
--- disabledDates配置格式及说明
示 例
说 明
["03/08/2003", "09/16/2003"]
禁止选择2003年3月8日和2003年9月16日
["03/08", "09/16"]
禁止选择每年的3月8日和9月16日
["^03/08"]
匹配日期的开始部分,禁止选择每年的3月8日
["03/../2006"]
禁止选择2006年3月的任何一天
["^03"]
禁止选择任何3月中的任何一天
--- 日期选择框(Ext.form.DateField)示例:
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';//统一指定错误信息提示方式
var form = new Ext.form.FormPanel({
title:'Ext.form.DateField示例',
labelSeparator :'：',//分隔符
labelWidth : 80,//标签宽度
bodyStyle:'padding:5 5 5 5',//表单边距
frame : true,
height:100,
width:300,
applyTo :'form',
items:[
new Ext.form.DateField({
id:'date',
format:'Y年m月d日',//显示日期的格式
maxValue :'12/31/2008',//允许选择的最大日期
minValue :'01/01/2008',//允许选择的最小日期
disabledDates : ["2008年03月12日"],//禁止选择2008年03月12日
disabledDatesText :'禁止选择该日期',
disabledDays : [0,6],//禁止选择星期日和星期六
disabledDaysText : '禁止选择该日期',
width : 150,
fieldLabel:'日期选择框'
})
]
})
});
- Ext.form.HtmlEditor HTML编辑器
--- 主要配置项目表
配置项
类 型
说明
createLinkText String 创建连接提示框中默认的提示信息 defaultLinkValue String 创建连接的默认值,默认为http:// fontFamilies Array 一个字体数组 buttonTips Object 编辑器工具栏中按钮的提示信息配置对象集合,用来自定义
工具栏的提示信息,具体配置方式参见下示例
示例:
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';
Ext.QuickTips.init();//使用HtmlEditor之前必须初始化提示
var form = new Ext.form.FormPanel({
title:'Ext.form.HtmlEditor示例',
labelWidth : 70,//标签宽度
labelSeparator :'：',//分隔符
width : 530,
frame : true,
applyTo :'form',
items:[new Ext.form.HtmlEditor({
name:'htmlContent',
id : 'htmlContent',
height:150,
width : 440,
fieldLabel:'HTML字段',
createLinkText : '创建超链接',//创建连接的提示信息
defaultLinkValue : "http://www.",//连接的默认格式
enableAlignments : true,//起用左、中、右对齐按钮
enableColors : true,//起用前景色、背景色选择按钮
enableFont : true,//起用字体选择按钮
enableFontSize : true,//起用字体增大和缩写按钮
enableFormat : true,//起用粗体、斜体、下划线按钮
enableLinks : true,//起用创建连接按钮
enableLists : true,//起用列表按钮
enableSourceEdit : true,//起用源代码编辑按钮
fontFamilies:['宋体','隶书','黑体'],//字体列表
buttonTips :{
bold : {
title: 'Bold (Ctrl+B)',
text: '粗体'
},
italic : {
title: 'Italic (Ctrl+I)',
text: '斜体'
},
underline : {
title: 'Underline (Ctrl+U)',
text: '下划线'
},
increasefontsize : {
title: 'Grow Text',
text: '增大字体'
},
decreasefontsize : {
title: 'Shrink Text',
text: '缩小字体'
},
backcolor : {
title: 'Text Highlight Color',
text: '背景色'
},
forecolor : {
title: 'Font Color',
text: '前景色'
},
justifyleft : {
title: 'Align Text Left',
text: '左对齐'
},
justifycenter : {
title: 'Center Text',
text: '居中对齐'
},
justifyright : {
title: 'Align Text Right',
text: '右对齐'
},
insertunorderedlist : {
title: 'Bullet List',
text: '项目符号'
},
insertorderedlist : {
title: 'Numbered List',
text: '数字编号'
},
createlink : {
title: 'Hyperlink',
text: '超连接'
},
sourceedit : {
title: 'Source Edit',
text: '切换源代码编辑模式'
}
}
})]
})
});
- Ext.form.FieldSet字段集
--- 扩展自Ext.Panel面板
--- 主要配置项目表
配置项
类 型
说 明
checkboxName String 指定字段集中用于展开或隐藏字段集面板的checkbox(选择框)
的名字,该属性只有在checkboxToggle为true时生效checkboxToggle Boolean 设置是否显示字段集的checkbox选择框,通过设置该选择框可以
实现隐藏或显示字段集的功能.默认为falselabelWidth Number collapsed Boolean 初始状态是否是关闭还是展开的,
默认为true即展开的
示例:
Ext.onReady(function(){
var form = new Ext.form.FormPanel({
title:'Ext.form.FieldSet示例',
labelWidth : 40,//标签宽度
width : 220,
//height:400,
frame : true,
renderTo :'hello',
items:[
new Ext.form.FieldSet({
title:'产品信息',
height:80, //注意:需要设置高度
labelSeparator :'：',//分隔符
items:[
new Ext.form.TextField({
fieldLabel:'产地'
}),
new Ext.form.NumberField({
fieldLabel:'售价'
})
]
}),
new Ext.form.FieldSet({
title:'产品描述',
height:90, //注意:需要设置高度
checkboxToggle : true,
checkboxName : 'description',
collapsed:true, //初始时是关闭的
items:[
new Ext.form.TextArea({
fieldLabel:'简介',
width : 130
})
]
})
]
})
});
1772
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
