4.1 制作表单
var form = new Ext.form.FormPanel({
title:'form',
defaultType:'textfield',
buttonAlign:'center',
frame:true,
width:220,
fieldDefaults:{
labelAlign:'right',
labelWidth:70
},
tiems:[{ //子组件;
fieldLabel:'文本框' //文本框组件;
}],
buttons:[{
text:'按钮'
}]
});
form.render('form');
4.2 FormPanel和BasicForm详解
FormPanel是Ext.Panel的一个子类;实际上,表单的功能是在Ext.form.BasicForm中实现的;在获得Ext.form.FormPanel之后,随时都可以用getForm()方法获得BasicForm对象;可以在获得的BasicForm上执行"提交"和"重置"等操作;
可以把Ext.form.FormPanel放到Ext.Viewport中作为整个页面布局的一个部分,同时用items指定Ext.form.FormPanel内部的子组件;可以通过xtype来指定每个子组件的类型;
4.3 Ext支持的输入组件
4.3.1 控件继承图
>.Ext.from.Field
>1.Ext.form.Checkbox //复选框
Ext.form.Radio //单选框
>2.Ext.form.Hidden //隐藏域
>3.Ext.form.TextField //文本输入
>1.Ext.form.NumberField //数字输入控件
>2.Ext.form.TextArea //多行文本输入
>3.Ext.form.TriggerField //选择控件
>1.Ext.form.ComboBox //下拉控件
Ext.form.TimeField //时间选取控件
>2.Ext.form.DateField //日期控件
>4.Ext.HtmlEditor //编辑器控件
4.3.2 表单控件
Ext.onReady(function(){
Ext.QuickTips.init(); //控件初始化;
var form = new Ext.form.FormPanel({ //实例化对象
buttonAlign:'center', //按钮居中;
width:600,
title:'form',
frame:true, //为组件提供圆角边框;
fieldDefaults:{ //对象内部的属性都会被应用到下面的实例中(注意优先级问题);
labelAlign:'right', //右浮动;
labelWidth:70 //宽度;
},
items:[{ //单个组件或者是组件集合;
xtype:'container',
layout:'column', //布局为列;
items:[{
columnWidth:.7,
xtype:'fieldset',
checkboxToggle:true, //控件组 组头;用复选框来设置控件的展开和收缩;
title:'单纯输入', //fieldset的legend;
autoHeight:true,
defaults:{width:300}, //应用所有的子组件的宽度;
defaultType:'textfield',
items:[{ //单个组件
fieldLabel:'文本', //域标签;文本域;
name:'text'
},{
xtype:'numberfield',
fieldLabel:'数字',
name:'number'
},{
xtype:'combo',
fieldLabel:'选择',
name:'combo',
store:new Ext.data.SimpleStore({
fields:['value','text'], //将模型的字段绑定到轴;
data:[
['value1','text1'],
['value2','text2']
]
}),
displayField:'text', //
valueField:'value', //相关的数据值绑定到ComboBox;
mode:'local', //?
emptyText:'请选择'
},{
xtype:'datefield', //带有日期选择器下拉框并会自动进行日期验证的日期输入表单项;
feildLabel:'日期',
name:'date'
},{
xtype:'timefield', //带有时间下拉框和自动时间验证的input表单项;
fieldLabel:'时间',
name:'tiem'
},{
xtype:'textarea',
fieldLabel:'多行',
name:'textarea'
},{
xtype:'hidden',
name:'hidden'
}]
},{
xtype:'container',
columnWidth:.3,
layout:'form',
items:[{
xtype:'fieldset',
checkboxToggle:true,
title:'多选',
autoHeight:true,
defaultType:'checkbox',
hideLabels:true,
style:'margin-left:10px;',
bodyStyle:'margin-left:20px;',
itmes:[{
boxLabel:'穿暖',
name:'check',
value:'1',
checked:true,
width:auto
},{
boxLabel:'吃饱',
name:'check',
value:'2',
checked:true,
width:'auto'
}]
},{
xtype:'fieldset',
checkboxToggle:true,
title:'单选',
autoHeight:true,
defaultType:'radio',
hideLabels:true,
style:'margin-left:10px;',
bodyStyle:'margin-left:20px;',
items:[{
boxLabel:'*',
name:'rad',
value:'1',
checked:true
},{
boxLabel:'爱情',
name:'rad',
value:'2'
}]
}]
}]
},{
xtype:'container',
layout:'form',
items:[{
labelAlign:'top',
xtype:'htmleditor',
fieldLabel:'在线编辑器',
id:'editor',
anchor:'98%',
height:200
}]
}],
buttons:[{
text:'保存'
},{
text:'读取'
},{
text:'取消'
}]
});
form.render('form');
})
4.3.3 基本输入控件Ext.form.Field
Ext.form.Field是所有输入控件的基类;它定义了输入控件通用的属性和功能函数;
>1.页面显示样式:clearCls/cls/fieldClass,它们分别用来定义不同状态下输入框采用的样式;
>2.控件参数配置:autoCreate/disabled,它们主要用来设置输入控件生成的DOM内容和标签内容;
>3.数据有效性校验:invalidText/msgFx,它们用来设置数据校验的方式以及如何显示错误信息;
//这些控件默认会监听blur事件,如果校验失败,就会根据msgTarget中的设置显示错误信息;通常会被设置qtip,用QuickTip显示错误信息;其他参数值:title/side/under;
var field1 = new Ext.form.Field({
fieldLabel:'qtip',
msgTarget:'qtip'
});
field1.markInvalid();
//markInvalid()函数用来显示field校验出错样式;
4.3.4 文本输入控件TextField
//专门用来输入文本数据的输入控件;
var text = new Ext.form.TextField({
fieldLabel:'单行', //<label>标签内容;
allowBlank:false, //非空检测;
emptyText:'空', //输入框默认显示信息;
maxLength:50, //最大值;
minLength:10 //最小值;
});
//表单控件最后都是放入表单中,然后渲染到div标签中;
var from = new Ext.form.FormPanel({
title:'form',
frame:true,
items:[text],
renderTo:'form'
});
4.3.5 多行文本输入控件TextArea
var area = new Ext.form.TextArea({
width:200, //宽度;
grow:true, //根据输入内容修改自身高度;
preventScrollbars:true, //禁止滚动条,内容超出范围,自动隐藏;
fieldLabel:'多行',
...
})
4.3.6 日期输入控件DateField
var date = new Ext.form.DateField({
fieldLabel:'日期',
emptyText:'请选择',
format:'Y-m-d', //如何保存并显示选中的日期;
disabledDays:[0,6] //禁止选择一周内的第一天和第七天;
})
4.3.7 时间输入控件TimeField
var time = new Ext.form.TimeField({
fieldLabel:'时间',
empty:'请选择',
minValue:'10:00 AM', //设置起始时间;
maxValue:'14:00 PM',
increment:30 //设置时间间隔;
});
4.3.8 在线编辑器HtmlEditor
var html = new Ext.form.HtmlEditor({
fieldLabel:'在线编辑器',
enableAlignments:true,
enableColors:true,
...
})
//应用对应的enable选项启用或禁用对应的功能按钮;
4.3.9 隐藏域Hidden
var hidden = new Ext.form.Hidden({
name:'hidden'
});
hidden.setValue('some thing'); //对隐藏域赋值;
var value = hidden.getValue(); //取值;
4.3.10 如何使用input type="image"
//Ext没有提供对应的控件,我们可以根据需要使用inputType对Ext.form.TextField进行修改;
var image = new Ext.form.TextField({
fieldLabel:'证件照片',
name:'smallimg',
inputType:'image',
inputAttrTpl:['src="../img/img1.png"'],
width:140,
height:120
});
//autoCreate使用的是DomHelper的语法,生成一个带有src的DOM;
4.4 ComboBox详解
//Ext中提供的ComboBox与HTML中原生的select无任何关系,它是用div重写的;
4.4.1 ComboBox简介
var data = [ //二维数组,ComboBox将要显示的数据;
['value1','text1'],
['value2','text2']
];
var store = new Ext.data.ArrayStore({ //将二维数组转成对象;
fields:['value','text'],
data:data
});
store.load();
var combo = new Ext.form.ComboBox({
store:stroe, //传入数据;
empty:'请选择',
mode:'local', //设置:数据已经读取到本地了;
valueField:'value', //读取store里的value(对应的在data里的value);
dispalyField:'text', //读取store里的text(实际是data里的text);
triggerAction:'query', //自动补全;
value:'value1', //设置combo的value值;
renderTo:'combo' //渲染到的必须是<imput id="combo" type="text" />
})
4.4.2 将Select转换成ComboBox
<select id="combo">
<option value='value1'>text1</option>
...
</select>
var combo = new Ext.form.ComboBox({
emptyText:'请选择',
mode:'local',
triggerAction:'all',
transform:'combo' //把id="combo"的select的数据抽离出来;添加到ComboBox里;
});
4.4.3 ComboBox结构详解
var combo = new Ext.form.ComboBox({
...
hiddenName:'comboId' //让ComboBox又增加了一个type="hidden"的input,并且它的name和id都是"comboId"
});
//若没有设置hiddenName,ComboBox提交的都是用户看到的text值;设置之后,才可以向后台提交text对应的value值;
4.4.4 ComboBox读取远程数据
var store = new Ext.data.Store({
proxy:{
type:'ajax',
url:'xxx.txt',
reader:{
type:'array'
},
fields:[
{name:'value'},{name:'text'}
]
}
});
var combo = new Ext.form.ComboBox({
..
mode:'remote', //读取远程数据;
});
4.4.5 ComboBox高级设置
>1.添加分页功能
var combo = new Ext.form.ComboBox({
..
mode:'remote', //参数必须是remote;因为分页的前提是先到store中分批获取数据;
minListWidth:200, //下拉列表的宽度;
pageSize:5 //每次显示多少条记录;
});
>2.是否允许用户自己填写内容
//ComboBox的显示框是一个type="text"输入框,所以默认可以输入数据的;
var combo = new Ext.form.ComboBox({
...
editable:false //禁止用户填写数据;
});
4.4.6 监听用户选择的数据
//设置事件机制监听ComboBox的事件,从而获知用户选择了哪条数据;
combo.on('select',function(comboBox){
alert(comboBox.getValue()+'-'+comboBox.getRawValue());
//getValue():返回对象的value值(value);
//getRawValue():返回表单项的原始值(text);
});
//on():要监听绑定的combo对象;
//select:要监听的事件;\
//comboBox:是被监听的combo对象本身;
4.4.7 使用本地数据实现省/市/县级联
comboProvince.on('select',function(comboBox){
var province = comboBox.getValue();
if(province == '河北'){
storeCity.proxy.data = dataCityHebei; //动态设置市;
}else if (province == '内蒙古'){
storeCity.proxy.data = dataCityNeimenggu;
}
});
comboCity.on('select',function(comboBox){
var city = comboBox.getValue(); //动态设置区;
if(city == "唐山"){
storeCounty.proxy.data = dataCountyTangshan;
}else{
storeCounty.proxy.data = dataCountyUnknow;
}
});
comboCounty.on('select',function(comboBox){
alert(comboProvince.getValue()+'-'+comboCity.getValue()+'-'+comboCounty.getValue());
});
4.5 复选框和单选框
4.5.1 复选框
var form = new Ext.form.FormPanel({
title:'form',
buttonAlign:'center',
frame:true, //提供圆角;
url:'xxx.jsp',
//Ext.form.Checkbox
items:[{ //在表单中添加控件容器;
xtype:'fieldset', //控件组,包装一组输入域的容器;渲染为HTML的fieldset;
title:'多选', //渲染为fieldset的legend;
autoHeigth:true,
defaultType:'checkbox',
hideLabels:true,
items:[ //在控件容器中添加复选框控件;
{boxLabel:'多选一',inputValue:'1',checked:true}, //默认选中;
{boxLabel:'多选二',inputValue:'2'},
{boxLabel:'多选三',inputValue:'3'},
]
}],
buttons:[{
text:'提交',
handler:function(){
form.getForm.submit();
}
}]
});
form.render('form');
4.5.2 单选按钮
//单选按钮是继承自复选框的,所以Checkbox中的所有功能都能在Radio中使用;
items:[{
xtype:'fieldset',
title:'单选',
defaultType:'radio', //findField('radio')对应的field;
hideLabels:true,
items:[
{boxLabel:'单选一',name:'radio',inputValue:'1',checked:true},
{boxLabel:'单选二',name:'radio',inputValue:'2'}
//具有相同name值的Radio控件会放在同一组;这样保证单选功能;
]
}],
buttons:[{
text:'提交',
handler:..
},{
text:'getGroupValue', //添加一个按钮;
handler:function(){ //触发器;
Ext.Msg.alert('信息',form.getForm().findField('radio').getGroupValue());
//信息弹出框;获取radio的inputValue值;
}
}]
4.5.3 CheckboxGroup和RadioGroup控件
//为复选框和单选按钮控件实现各种复杂的排列方式;
>1.横向排列
{
xtype:'checkboxgroup', //默认横排;
fieldLabel:'自动布局',
...
}
>2.竖向排列
{
xtype:'checkboxgroup',
fieldLabel:'单列',
columns:1, //显示为一竖列;
...
}
>3.多列排列
{
xtype:'checkboxgroup',
columns:3, //显示为三竖列;
vertical:true, //垂直优先;
itemsCls:'x-check-group-alt', //向组件添加Class;
...
}
4.6 滑动条表单控件
//可以将滑动条作为一个表单空间爱你放在表单面板中进行布局,实现表单数据的修改/读取与提交功能;
>1.滑动条
var huadong = new Ext.form.FormPanel({
widrth:400,
title:'滑动条控件',
bodyStyle:'padding:10px;',
renderTo:'container',
defaultType:'sliderfield',
defaults:{
anchor:'95%',
tipText:function(thumb){
return String(thumb.value)+'%';
}
},
items:[{
fieldLabel:'Sound Effects',
value:50,
name:'fx'
},{
fieldLabel:'Ambient Sounds',
value:80,
name:'ambient'
}]
});
>2.多滑块滑动条
var horizontal = new Ext.Slider({
renderTo:'multi-slider-horizontal',
width:214,
minValue:0,
maxValue:100,
values:[10,50,90],
plugins:new Ext.slider.Tip();
})
4.7 表单布局
4.7.1 默认平铺布局
var form = new Ext.form.FormPanel({
defaultType:'textfiled',
frame:true,
fieldDefaults:{
labelWidth:60
},
items:[{fieldLabel:'默认布局'}],
});
4.7.2 平分列布局
//使用"layout:'column'"来说明下面要使用的是列布局;然后在items指定每列中使用'columnWidth'设置每列所占总宽度的百分比;
//须手动指定使用layout:'form',这样才能在每列中正常显示输入框和对应标签;
var from = new Ext.form.FormPanel({
..
items:[{
layout:'column', //列布局;
items:[{
columnWidth:0.4, //本列占总宽度的百分比;
layout:'form', //组件内部默认布局;
defaultType:'textfield',//以下组件为文本输入控件;
items:[
{fieldLabel:'平分列1'},
{fieldLabel:'平分列2'},
]
}]
}]
});
4.7.3 在布局中使用fielset
//在标准HTML中,需把输入项都放到fieldset中,以此来显示分组结构;
items:[
xtype:'feildset', //使用fieldset;
title:'使用fieldset', //fieldset的legend;
columnWidth:0.5,
lsyout:'form',
autoHeight:true,
defaultType:'textfield',//定义以下组件xtype;
items:[{fieldLabel:'汉字'}]
]
4.7.4 在fieldset中使用布局
//创建FieldSet对象,包含分列布局,再传入到FormPanel中;
4.7.5 自定义布局
//因为Ext.form.FormPanel继承自Ext.Panel,所以可以使用layout和items提供各种内部布局形式;
//除了Ext.form.Field之类的输入控件外,还可以使用其他Panel来装饰表单;
//使用xtype:'panel',在它里边使用img来显示图片;
{
..
items:[
{fieldLabel:'文字',xtype:'textfield'},
{xtype:'panel',html:'<div><img src='user.png' /></div>'}
]
}
4.8 数据校验
//在Firefox下校验失败,调用submit()也不会提交;
//在IE下必须先使用form.isValid()自行判断,如果返回false,就不能在调用submit(),否则仍然会将非法数据提交到后台;
Ext.QuickTips.init(); //提示功能所需函数;
new Ext.form.TextField({
name:'text',
fieldLabel:'不为空',
allowBlank:false //输入框不能为空;
});
4.8.2 最大长度和最小长度
new Ext.form.TextField({
fieldLabel:'字符长度',
name:'text',
minLength:5,
maxLength:10
});
4.8.3 借助vtype
//为vtype设置属性,即可校验;
new Ext.form.TextField({
fieldLabel:'vtype校验',
name:'text',
vtype:'email/url/alpha/alphanum'
//验证邮箱/网址/英文字符/英文字符和数字;
});
4.8.4 自定义校验规则
//允许自定义一个regex对输入数据进行校验;
new Ext.form.TextField({
fieldLabel:'自定义校验',
regex:/^[\u4E00-\u9FA5]+$/,
regexText:'只能输入汉字'
});
4.8.5 NumberField校验
//NumberField控件不允许用户输入不符合要求的数据;
items:[{
fieldLabel:'数字',
xtype:'numberfield', //数字控件;
allowNegative:false, //不允许负值;
allowDecimals:false, //不允许小数;
decimalPrecision:4, //精确到小数点后几位;
minValue:0,
maxValue:150,
maskRe:/\d/ //阻止小数和符号的输入;
}]
4.8.6 使用后台返回的校验信息
//在服务器返回的相应中可以包含校验失败的信息;
items:[{
fieldLabel:'输入框1',
name:'text1'
},{
fieldLabel:'输入框2',
name:'text2'
}],
buttons:[{
text:'按钮',
handler:function(){
form.getForm().submit({
success:function(form,action){
Ext.Msg.alert('信息',action.result.msg);
},
failure:function(form,action){
if(action.failureType == Ext.form.Action.SERVER_INVALID){
Ext.Msg.alert('错误','后台校验失败');
}else{
Ext.Msg.alert('错误','无法访问后台');
}
}
});
}
}]
//通过actioin的failureType来判断响应失败是因为校验失败还是因为HTTP链接发生错误;
>.后台响应信息
{success:false,errors:{text1:'有问题1',text2:'有问题2'}}
//errors对应一个JSON对象,里边包含的就是错误信息;与输入框的text1和text2对应起来,最终显示在页面上;
4.9 使用表单提交数据
>.一种原始的HTML表单形式的提交和两种Ajax形式的提交;
4.9.1 Ext默认的提交形式
Ext.onReady(function(){
var form = new Ext.form.FormPanel({
defaultType:'textfield',
title:'表单提交',
...
url:'xxx.jsp', //提交路径;
items:[{
fieldLabel:'文本框',
name:'text' //后台判断来自哪个控件;
}],
buttons:[{
text:'提交', //按钮显示文字;
handler:function(){ //提交按钮调用函数;
form.getForm.submit({ //为submit封装回调函数;
//只有后台响应为true,或响应的JSON中包含success:true时,执行;
success:function(form,action){
//参数直接调用form对象;
//action可直接从返回信息中调用JSON数据 ↓↓
Ext.Msg.alert('信息',action.result.msg);
},
failure:function(){
//Ext规定:如果响应的JSON中的success不是true,并且JSON中包含errors:{},则是判断后的业务错误;
//如果没有包含errors:{},则是链接失败;
Ext.Msg.alert('错误','操作失败!');
}
})
}
}]
});
form.render('form');
});
4.9.2 使用HTML原始的提交形式
//Ext默认的提交形式是不会进行页面跳转的;主要是"one page one application"的形式;
//在Ext.form.FormPanel里找到form,在它上面调用submit()就可以了;
//Ext动态生成了表单,却没有把action部分添加上;
//所以需要修改按钮的handler函数↓↓↓
handler:function(){
form.getForm().getEl().dom.action = 'xxx.jsp';
//Ext中所有的控件都有el,el都是有DOM的;这个DOM模型就是Ext控件在页面上真实对应的部分了;
form.getForm().getEl().dom.submit();
//应用了HTML原始的提交形式;
}
4.9.3 单纯Ajax
//若使用外部Ajax,需要从中把字段的数据取出来;
>.form.getValues():若参数是true,就返回JSON组装的字符串;若参数是false,就返回JSON对象;
>.findField():获取表单里的控件;
var text = form.getForm().findField('text');
//用getValues(true)函数来配合Ajax获得数据;然后用Ajax传递给后台;最后判断回调;
handler:function(){
var text = form.getForm().findField('text');
Ext.Ajax.request({
method:'POST',
url:'xxx.jsp',
success:function(response){
var result = Ext.decode(response.responseText);
Ext.Msg.alert('信息',result.msg);
},
failure:function(){},
params:form.getForm().getValues(true)
})
}
4.9.4 文件上传
//为Ext.form.Field设置inputType:'file'即可;
var file = new Ext.form.FormPanel({
...
title:'文件上传',
fileUpload:true,
items:[{
xtype:'textfield',
fieldLabel:'上传',
name:'file',
inputType:'file'
}]
})
4.9.5 文件上传控件
//FileUploadField更加美化了上传选择控件;
var fileUpload = new Ext.form.FormPanel({
..
title:'File Upload Field',
fileUpload:true,
items:[{
xtype:'fileuploadfield',
fieldLabel:'上传控件',
name:'fielduploadfield'
}]
});
4.10 自动把数据填充到表单中
//使用Ext.data.JsonReader来负责数据的读取和转换操作;
[{text:'textField',number:12.34,dat:'2015-01-01',combo:1}]
//↑↑这里提供了JSON数据,表单中需要配置对应的reader↓↓;
var reader = new Ext.data.JsonReader({},[
{name:'text',type:'string'},
{name:'number',type:'float'},
{name:'date',type:'date',dateFormat:'Y-m-d'},
{name:'combo',type:'int'}
]);
//现在将设置好的reader放到表单中,后台返回的JSON会在这里被JsonReader()转换成对应的数据类型,供表单使用;
var form = new Ext.form.FormPanel({
..
reader:reader,
items:[{
xtype:'textfield',
fieldLabel:'文本',
name:'text'
},{
xtype:'numberfield',
fieldLabel:'数字',
name:'number'
},{
xtype:'datefield',
fieldLabel:'日期',
name:'date'
},{
xtype:'combo',
fieldLabel:'下拉',
name:'combo',
store:new Ext.data.SimpleStore({
fields:['value','text'],
data:[[1,'text1'],[2,'text2'],[3,'text3']]
}),
triggerAction:'all',
valueField:'value',
displayField:'text'
}]
})
//当调用form.load()函数时,表单会使用Ajax去后台读取需要的数据;
{
text:'读取',
handler:function(){
form.getFomr().load({url:'xx2.txt'});
}
}
//为load()传递一个url参数,指定读取数据的网址;这个网址返回的信息就是上面提到的用于向表单填充数据的JSON字符串;