Extjs中正则表达式.docx
- 文档编号:30037078
- 上传时间:2023-08-04
- 格式:DOCX
- 页数:23
- 大小:23.59KB
Extjs中正则表达式.docx
《Extjs中正则表达式.docx》由会员分享,可在线阅读,更多相关《Extjs中正则表达式.docx(23页珍藏版)》请在冰豆网上搜索。
Extjs中正则表达式
Extjs控件属性,Extjs笔记,Extjs
Ext.form.TimeField:
配置项:
maxValue:
列表中允许的最大时间
maxText:
当时间大于最大值时的错误提示信息
minValue:
列表中允许的最小时间
minText:
当时间小于最小值时的错误提示信息
increment:
两个相邻选项间的时间间隔,默认为15分钟
format:
显示格式,默认为“g:
iA”。
一般使用“H:
i:
s”
H:
带前缀0的24小时
i:
带前缀0的分钟
s:
带前缀0的秒
invalidText:
当时间值非法时显示的提示信息
altFormats:
多个时间输入格式组成的字符串,不同的格式之间使用“|”进行分割Ext.form.FieldSet
animCollapse:
动画折叠,默认为false
checkboxToggle:
设置是否显示字段集的checkbox选择框,默认为false
checkboxName:
指定字段集中用于展开或隐藏字段集面板的checkbox的名字,该属性只有在checkboxToggle为true时生效
labelWidth:
字段标签的宽度,可以级联到子容器
layout:
布局,默认为form
Ext.form.DateFied
maxValue:
允许选择的最大日期
maxText:
当日期大于最大值时的错误提示信息
minValue:
允许选择的最小时间
minText:
当日期小于最小值时的错误提示信息
format:
日期显示格式,默认为“m/d/y”,一般使用“Y-m-d”
Y:
四位年份
m:
带前缀0的月份
d:
带前缀0的日期
y:
两位年份
n:
不带前缀0的月份
j:
不带前缀0的日期
w:
星期的数字,0表示星期日,1代表星期一
showToday:
是否显示今天按钮,默认为true
altFormats:
多个日期输入格式组成的字符串,不同的格式之间使用“|”进行分割,默认值为'm/d/Y|n/j/Y|n/j/y|m/j/y|n/d/y|m/j/Y|n/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d'disabledDates:
禁止选择的日期组成的数组
disabledDatesText:
选择禁选日期时显示的提示信息
disabledDays:
禁止选择的星期组成的数组,0代表星期日,1代表星期一
disabledDaysText:
选择禁选星期时显示的提示信息
invalidText:
当日期值非法时显示的提示信息
方法:
getValue():
取得日期值
Ext.form.ComboBox
displayField:
被显示在下拉框中的字段名
editable:
是否可编辑,默认为true
forceSelection:
输入值是否严格为待选列表中存在的值。
如果输入不存在的值,会自动选择第一个最接近的值。
hiddenName:
隐藏字段的名字,如果提供该参数则一个隐藏字段将被创建,用来存储所选值,当表单提交时在服务器端可以通过该名字取得列表中的所选值
listWidth:
下拉列表的宽度
minListWidth:
下拉列表的最小宽度,默认为70像素
loadingText:
当下拉框加载数据时显示的提示信息,只有当mode='remote'时才会生效
maxHeight:
下拉列表框的最大高度,默认为300像素
minChars:
下拉列表框自动选择前用户需要输入的最小字符数量。
mode='remote'默认为4,mode='local'默认为0
mode:
下拉列表框的数据读取模式。
remote读取远程数据,local读取本地数据
pageSize:
下拉列表框的分页大小。
该项设置只在mode='remote'时生效
queryParam:
查询的名字,默认为'query',将被传递到查询字符串中
allQuery:
一个发往服务器用来查询全部信息的查询字符串,默认为空字符串''
selectOnFocus:
当获得焦点时立刻选择一个已存在的列表项。
默认为false,此项只有在editable=true时才会生效
store:
列表框绑定的数据源
transform:
将页面中已存在的元素转换为组合框
lazyInit:
延时初始化下拉列表,默认为true
lazyRender:
延时渲染,默认为false
triggerAction:
设置单击触发按钮时执行的默认操作,有效值包括all和query,默认为query,如果设置为all则会执行allQuery中设置的查询
typeAhead:
设置在输入过程中是否自动选择匹配的剩余部分文本(选择第一个满足条件的),默认为false
value:
初始化组合框中的值
valueField:
组合框的值字段
valueNotFoundText:
值不存在时的提示信息
tpl:
Ext模板字符串或模板对象,可以通过该配置项自定义下拉列表的显示方式
方法:
clearValue():
清空字段当前值
doQuery(Stringquery,BooleanforceAll):
getValue():
getStore():
setValue(Stringvalue):
Ext.from.RadioGroup
allowBlank:
blankText:
Ext.form.Radio;
getGroupValue():
setValue(value{String/Boolean}):
Ext.form.CheckboxGroup
allowBlank:
是否允许不选择,默认为true
blankText:
columns:
显示的列数,可选值包括:
固定值auto、数值、数组(整数、小数)items:
对象数组
vertical:
是否垂直方向显示对象,默认为false
Ext.form.Checkbox
boxLabel:
复选框的文字描述
checked:
复选框是否被选择,默认为false
handler:
当checked值改变时触发的函数,函数包含两个参数:
checkbox、checkedinputValue:
方法:
getValue():
返回复选框的checked状态
setValue(Boolean/Stringchecked):
Ext.form.NumberField
allowDecimals:
是否允许输入小数,默认为true
allowNegative:
是否允许输入负数,默认为true
baseChars:
输入的有效数字集合,默认为'0123456789'
decimalPrecision:
数字的精度,默认保留小数点后2位
decimalSeparator:
十进制分隔符,默认为'.'
maxValue:
允许输入的最大数值
maxText:
超过最大值之后的提示信息
minValue:
允许输入的最小数值
minText:
超过最小值之后的提示信息
nanText:
输入非有效数值之后的提示信息
Ext.form.TextArea
preventScrollbars:
是否禁止出现滚动条,默认为false
Ext.form.TextField
allowBlank:
是否允许为空,默认为true
blankText:
空验证失败后显示的提示信息
emptyText:
在一个空字段中默认显示的信息
grow:
字段是否自动伸展和收缩,默认为false
growMin:
收缩的最小宽度
growMax:
伸展的最大宽度
inputType:
字段类型:
默认为text
maskRe:
用于过滤不匹配字符输入的正则表达式
maxLength:
字段允许输入的最大长度
maxLengthText:
最大长度验证失败后显示的提示信息
minLength:
字段允许输入的最小长度
minLengthText:
最小长度验证失败后显示的提示信息
regex:
正则表达式
regexText:
正则表达式验证失败后显示的提示信息
vtype:
验证类型的名字
alpha:
限制只能输入字母
alphanum:
限制只能输入字母和数字
url
vtypeText:
验证失败时的提示信息
validator:
自定义验证函数
selectOnFocus:
当字段得到焦点时自动选择已存在的文本,默认为falseExt.form.Field
name:
字段名
value:
字段的初始化值
disabled:
字段是否不可用,默认为false
fieldLabel:
字段标签说明
hideLabel:
隐藏字段标签,默认为false
labelSeparator:
字段标签与字段之间的分隔符,默认为':
'
labelStyle:
字段标签样式
inputType:
默认为text
invalidClass:
默认为x-form-invalid
invalidText:
字段非法文本提示
msgTarget:
错误信息显示的位置,默认为qtip
qtip:
显示一个浮动的提示信息
title:
显示一个浏览器的浮动提示信息
under:
在字段下方显示一个提示信息
side:
在字段右边显示一个提示信息
readOnly:
字段是否只读,默认为false
validateOnBlur:
字段在失去焦点时被验证,默认为true
方法:
clearInvalid():
getRawValue()
setRawValue(Mixedvalue)
getValue()
setValue(Mixedvalue)
isDirty():
字段值在装载后是否被修改过
isValid(BooleanpreventMark):
当前字段值是否合法
markInvalid([Stringmsg])
validate()
reset()
Ext.form.FormPanel
items:
一个元素或元素数组
buttons:
一个按钮配置对象的数组,按钮将被添加到表单页脚中
buttonAlign:
按钮的对齐方式,可选值有left、center、right,默认为centerlabelWidth:
表单标签的宽度
labelAlign:
表单标签的对齐方式,可选值有left、top、right,默认为left
labelSeparator:
字段标签与字段之间的分隔符,默认为':
'
minButtonWidth:
按钮的最小宽度,默认为75
方法:
getForm():
Ext.form.BasicForm
load(Objectoptions)
startMonitoring()
stopMonitoring()
Ext.form.BaseicForm
baseParams:
传递到请求中的参数
method:
表单的提交方式,有效值包括GET、POST
url:
表单默认的提交路径
fileUpload:
表单是否进行文件上传
timeout:
表单动作的超时时间,默认为30秒
trackResetOnLoad:
是否在表单初次创建时清楚数据
方法:
doAction(String/ObjectactionName,[Objectoptions]):
执行一个预订的动作,可用选项包括:
url:
动作提交的路径
method:
表单的提交方式,有效值包括GET、POST
params:
传递到请求中的参数
headers:
success:
执行成功后回调的函数,包括两个参数:
form和action
failure:
执行失败后回调的函数,包括两个参数:
form和action
clientValidation:
是否客户端验证
clearInvalid():
清除表单中所有的无效验证信息
findField(Stringid):
查找表单字段
getValues([BooleanasString]):
isDirty():
表单数据是否被更改过
isValid():
客户端验证是否成功
load(Objectoptions):
执行表单读取动作
loadRecord(Recordrecord):
从一个数据记录中读取数据到表单中
markInvalid(Array/Objecterrors):
成批设置表单字段为验证无效
reset():
重置表单
setValues(Array/Objectvalues):
成批设置表单字段值
submit(Objectoptions):
执行表单提交动作
updateRecord(Recordrecord):
持久化表单数据到记录集中
Ext.form.Action
success:
执行成功后回调的函数,包括两个参数:
form和action
failure:
执行失败后回调的函数,包括两个参数:
form和action
method:
表单的提交方式,有效值包括GET、POST
params:
传递到请求中的参数
url:
动作提交的路径
waitMsg:
动作执行时显示的等待信息
属性:
Action.CLIENT_INVALID:
客户端验证错误
Action.CONNECT_FAILURE:
通信错误
Action.LOAD_FAILURE:
加载数据时,没有包含data属性的字段被返回
Action.SERVER_INVALID:
服务端验证错误
failureType:
错误类型
result:
包含布尔类型的success属性和其他属性,如{success:
true,msg:
'ok'}type:
动作类型,可选值有submit和load
Ext.form.Action.Submit:
返回的信息中要包含一个布尔类型的success属性和一个可选的errors属性
Ext.form.Action.Load:
返回的信息中要包含一个布尔类型的success属性和一个data属性
Ext.grid.EditorGridPanel
clicksToEdit:
设置点击单元格进入编辑模式的点击次数,默认为2
autoEncode:
是否自动编码/解码HTML内容,默认为false
selModel:
默认为Ext.grid.CellSelectionModel
主要方法:
startEditing(NumberrowIndex,NumbercolIndex):
开始编辑指定单元格
stopEditing([Booleancancel]):
结束编辑操作
Ext.grid.GroupinView
enableGroupingMenu:
是否在表头菜单中进行分组控制,默认为true
groupByText:
表头菜单中分组控制的菜单文字,默认为'GroupByThisField'
enableNoGroups:
是否允许用户关闭分组功能,默认为true
showGroupsText:
在表头菜单中启用分组和禁用分组的菜单文字,默认为'ShowinGroups'
groupTextTpl:
用于渲染分组信息的模板,默认为'{text}',常用的可选值有:
text:
列标题:
组字段值
gvalue:
组字段的值
startRow:
组行索引
enableGrouping:
是否对数据分组,默认为true
hideGroupedColumn:
是否隐藏分组列,默认为false
ignoreAdd:
在向表格中添加数据时是否刷新表格,默认为false
showGroupName:
是否在分组行上显示分组字段的名字,默认为true
startCollapsed:
初次显示时分组是否处于收缩状态,默认为false
主要方法:
collapseAllGroups():
收缩所有分组行
expandAllGroups():
展开所有分组行
getGroupId(Stringvalue):
根据分组字段值取得组id
toggleAllGroups([Booleanexpanded]):
切换所有分组行的展开或收缩状态
toggleGroup(StringgroupId,[Booleanexpanded]):
切换指定分组行的展开或收缩状态
2、Ext.data.GroupingStore
groupField:
分组字段
groupOnSort:
是否在分组字段上排序,默认为false
remoteGroup:
是否远程分组数据,默认为false。
如果是远程分组数据,则通过groupBy参数发送分组字段名
3、范例源码
vardatas=[[1,"张三",24,"男",newDate(1986,06,09)],[2,"李四",30,"女",newDate(1980,09,13)],
[3,"王五",28,"男",newDate(1982,01,10)]];
varperson=Ext.data.Record.create([
{name:
"personId",mapping:
0},
{name:
"personName",mapping:
1},
{name:
"personAge",mapping:
2},
{name:
"personGender",mapping:
3},
{name:
"personBirth",mapping:
4}
]);
vargrid=newExt.grid.GridPanel({
title:
"GroupingView实例",
renderTo:
"div1",
width:
500,
height:
300,
frame:
true,
tbar:
[
{
text:
"展开/收缩",
iconCls:
"search",
handler:
function(){
varview=grid.getView();
//vargroupId=view.getGroupId("男");
//view.toggleGroup(groupId);
view.toggleAllGroups();
}
}
],
store:
newExt.data.GroupingStore({
reader:
newExt.data.ArrayReader({id:
0},person),
data:
datas,
sortInfo:
{field:
"personId",direction:
"ASC"},//数据排序
groupField:
"personGender"//分组字段
}),
view:
newExt.grid.GroupingView({
sortAscText:
"升序",
sortDescText:
"降序",
columnsText:
"表格字段",
groupByText:
"使用当前字段进行分组",
showGroupsText:
"表格分组",
groupTextTpl:
"{text}(共{[values.rs.length]}条)"
}),
columns:
[
{id:
"personId",header:
"编号",width:
50,dataIndex:
"personId"},{id:
"personName",header:
"姓名",width:
70,dataIndex:
"personName"},{id:
"personAge",header:
"年龄",width:
45,dataIndex:
"personAge"},
{id:
"personGender",header:
"性别",width:
45,dataIndex:
"personGender"},{id:
"personBirth",header:
"出生日期",width:
120,dataIndex:
"personBirth",renderer:
Ext.util.Format.dateRenderer("Y年m月d日")}
]
});
Ext.grid.GridPanel:
store:
表格的数据集
columns:
表格列模式的配置数组,可自动创建ColumnModel列模式
autoExpandColumn:
自动充满表格未用空间的列,参数为列id,该id不能为0stripeRows:
表格是否隔行换色,默认为false
cm、colModel:
表格的列模式,渲染表格时必须设置该配置项
sm、selModel:
表格的选择模式,默认为Ext.grid.RowSelectionModelenableHdMenu:
是否显示表头的上下文菜单,默认为true
enableColumnHide:
是否允许通过标题中的上下文菜单隐藏列,默认为trueloadMask:
是否在加载数据时显示遮罩效果,默认为false
view:
表格视图,默认为Ext.grid.GridView
viewConfig:
表格视图的配置对象
autoExpandMax:
自动扩充列的最大宽度,默认为1000
autoExpandMin:
自动扩充列的最小宽度,默认为50
columnLines:
是否显示列分割线,默认为false
disableSelection:
是否禁止行选择,默认为false
enableColumnMove:
是否允许拖放列,默认为true
enableColumnResize:
是否允许改变列宽,默认为true
hideHeaders:
是否隐藏表头,默认为false
maxHeight:
最大高度
minColumnWidth:
最小列宽,默认为25
trackMouseOver:
是否高亮显示鼠标所在的行,默认为true
主要方法:
getColumnModel():
取得列模式
getSelectionModel():
取得选择模式
getStore():
取得数据集
getView():
取得视图对象
reconfigure(Ext.data.Storestore,Ext.grid.ColumnModelcolModel):
使用一个新的数据集和列模式重新配置表格组件
2、Ext.grid.Column
主要配置项:
id:
列id
header:
表头文字
dataIndex:
设置列与数据集中数据记录的对应关系,值为数据记录中的字段名称。
如果没有设置该项则使用列索引与数据记录中字段的索引进行对应
width:
列宽
align:
列数据的对齐方式
hidden:
是否隐藏列,默认为false
fixed:
是否固定列宽,默认为false
menuDisabled:
是否禁用列的上下文菜单,默认为false
resizable:
是否允许改变列宽,默认为true
sortable:
是否允许排序,默认为true
renderer:
设置列的自定义单元格渲染函数
传入函数的参数有:
value:
数据的原始值
metadata:
元数据对象,用于设置单元格的样式和属性,该对象包含的属性有:
css:
应用到单元格TD元素上的样式名称
attr:
一个HTML属性定义字符串,例如'style="color:
blue"'record:
当前数据记录对象
rowIndex:
单元格的行索引
colIndex:
单元格的列索引
store:
数据集对象
xtype:
列渲染器类型,默认为gridcolumn,其它可选值有booleancolumn、numbercolumn、datecolumn、templatecolu
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Extjs 正则 表达式