Ext Js Form表单（四）
1、 Ext.form.FormPanel、Ext.form.BasicForm的区别：
Ext.form.FormPanel是Ext.Panel的一个子类，可以用于布局。Ext.form.BasicForm可以通过FormPanel的getForm()方法获得，BasicForm可以提交表单数据和复位表单初始值等操作。
2、 Ext表单支持的控件继承图
3、 表单默认采用”form”布局方式，对表单布局可以采用Ext.form.FormPanel和Ext.form.FieldSet容器。
实例代码：
Ext.QuickTips.init(); // 表单验证需要此控件的支持
var form = new Ext.form.FormPanel({
layout: "form", //默认的布局方式
title: "表单",
width: 600,
labelAlign: "right", //label位置
frame: true,
items: [{
layout: "column",
items: [{
columnWidth:.6, // 设置column布局所占的比例
defaults:{width: 200}, // 设置每个控件所占有的宽度
xtype: "fieldset",// Ext.form.FieldSet
title: "FIELDSET_ONE",
items: [{
xtype:"textfield", // Ext.form.TextField
fieldLabel:"姓名",
name:"name",
emptyText:"空", // 未输入内容时的提示信息
allowBlank:false, // 不允许为空
maxLength:10, // 最大长度
minLength:5, // 最小长度
regex:/^(\w){5,10}$/, // 正则表达式验证
regexText:"只能输入5-10个字符"
},{
xtype:"textfield",
fieldLabel:"密码",
name:"password",
inputType:"password" // input字段的type属性
},{
xtype:"textarea", // Ext.form.TextArea
fieldLabel:"多段内容",
name:"content"
},{
xtype:"datefield", // Ext.form.DataField
fieldLabel:"日期",
name:"date",
value:new Date(),
emptyText:"请选择",
format:"Y-m-d H:i:s", // 日期显示格式
disabledDays:[0,6] // 控制显示的天
},{
xtype:"hidden",
name:"hidden",
value:"hidddddden"
}]
},{
columnWidth:.4,
xtype: "fieldset",
title: "FIELDSET_TWO",
items:[{// 建立combobox的第一种方式
xtype:"combo",
width:120,
name:"combo1",
store:new Ext.data.SimpleStore({
data:[
["value1","text1"],
["value2","text2"],
["value3","text3"],
["value4","text4"]
],
fields:["value","text"]
}),
valueField:"value", // 显示的值段
displayField:"text", // 显示的文本段
mode:"local" // 告诉combobox，数据已经读取到本地了
},{ // combo读取远程数据
xtype:"combo",
width:120,
name:"combo3",
store:new Ext.data.Store({
proxy:new Ext.data.HttpProxy({url:'test.txt'}),
reader: new Ext.data.ArrayReader({}, [
{name: 'value'},
{name: 'text'}
])
}),
emptyText: '请选择',
mode: 'remote',
triggerAction: 'all',
valueField: 'value',
displayField: 'text'
},{ // 多选框 Ext.form.Checkbox
xtype:"checkbox",
boxLabel:"多选1",
name:"checkbox",
inputValue:"1",
checked:true
},{
xtype:"radio",
boxLabel:"单选1",
name:"radio",
inputValue:"1",
checked:true
},{
xtype:"radio",
boxLabel:"单选2",
name:"radio",
inputValue:"2"
}]
}]
},{
xtype: "fieldset",
layout: "form",
items:[{
xtype: "htmleditor", // Ext.form.HtmlEditor
fieldLabel:"在线编辑器",
name: "editor"
}]
}],
url: "<%=path%>/test",
buttons: [{
text: "提交",
handler: function(){
// 1、表单默认的提交方式（ajax）
form.getForm().submit({
//表单默认采用ajax提交，所以通过回调函数判断是否执行成功。
//ajax默认提交成功为success，失败为failure
//form提交后台相应包括success：true时，才执行success函数
//详细参考API详细代码
success:function(form,action){
Ext.Msg.alert("SUCCESS",action.result.msg);
},
failure:function(form, action) {
switch (action.failureType) {
case Ext.form.Action.CLIENT_INVALID:
Ext.Msg.alert("Failure","Form fields may not be submitted with invalid values");
break;
case Ext.form.Action.CONNECT_FAILURE:
Ext.Msg.alert("Failure","Ajax communication failed");
break;
case Ext.form.Action.SERVER_INVALID:
Ext.Msg.alert("Failure",action.result.msg);
}
}
});
// 2、使用html原始的提交方式
form.getForm().getEl().dom.action= "/test";
form.getForm().getEl().dom.submit();
// 3、使用单纯的ajax方式提交
var name= form.getForm.findField("name"); // 可以获取表单控件的值
//Ext.Ajax.request();
}
}]
});
form.render("form");
form提交后台的处理程序：
response.setCharacterEncoding("UTF-8");
response.setContentType("text/plain;charset=utf-8");
PrintWriterout = response.getWriter();
out.write("{success:true,msg: '操作成功。'}");
4、 form上传文件
首先为form添加:fileUpload: true参数
其次添加一个field，并设置它的inputType属性为：file.
Form默认也是ajax方式，后台出息可以采用FileUpload组件实现上传
代码如下：
var form = newExt.form.FormPanel({
labelAlign: 'right',
title: 'form',
labelWidth: 50,
buttonAlign: 'center',
frame:true,
fileUpload: true,
url: '09_01.jsp',
width: 280,
items: [{
xtype: 'textfield',
fieldLabel: '文本框',
name: 'file',
inputType:'file'
}],
buttons: [{
text: '提交',
handler: function() {
form.getForm().submit({
success:function(form, action){
Ext.Msg.alert('信息', action.result.msg);
},
failure:function(){
Ext.Msg.alert('错误', '失败');
}
});
}
}]
});
form.render("form");
5、 form表单填充数据。
1） 可以通过表单控件的value配置项设置，也可以通过表单控件对象的setValue()方法设置。
2） 对整个表单的数据进行设置：
var reader = new Ext.data.JsonReader({},[
{name:'text', type: 'string'},
{name:'number', type: 'float'},
{name:'date', type: 'date', dateFormat: 'Y-m-dTH:i:s'},
{name:'combo', type: 'int'}
]);
var form= new Ext.form.FormPanel({
labelAlign:'right',
title: 'form',
labelWidth: 50,
frame:true,
url:'form2.jsp',
width: 280,
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.render("form");
form.getForm().load({url:'10-01.txt'});