1、使用表单提交数据
// form start
var form = new Ext.form.FormPanel({
//表单的标题
title: ‘编辑学生信息‘,
// 表单是否有色背景
frame: true,
// 表单包围items内容的边框
border : true,
//表单的宽度
width: 260,
//表单的高
autoHeight: true,
// defaultType是在items下的元素没有设置xtype时的缺省值
defaultType: ‘textfield‘,
// 对于下一级的元素，如果有共同的配置放在defaults中
defaults: {
//是否允许为空
allowBlank: false,
//文本标签靠右
labelAlign: ‘right‘,
//文本标签的宽度
labelWidth: 60
},
items: [{
//通过form.getForm().findField("id").getValue()获取其值
//或者var formValues=form.getForm().getValues(); //获取表单中的所有Name键/值对对象
//获取formValues["firstname"];
xtype: ‘hidden‘,
name: ‘id‘
},{
//通过
fieldLabel: ‘学号‘,
name: ‘code‘,
// anchor一般与布局column一起使用，columnWidth的值乘以anchor的值，即为本组件所占的长度。
// 注意：anchor不可与设置长度的属性width同时出现，否则，width属性无效。
anchor : ‘50%‘
},{
fieldLabel: ‘年龄‘,
name: ‘age‘,
xtype: ‘numberfield‘,
allowNegative: false
},{
fieldLabel: ‘政治面貌‘,
name: ‘political‘,
xtype: ‘combo‘,
store: new Ext.data.SimpleStore({
fields: [‘text‘],
data: [[‘群众‘],[‘党员‘],[‘团员‘]]
}),
emptyText: ‘请选择‘,
mode: ‘local‘,
triggerAction: ‘all‘,
valueField: ‘text‘,
displayField: ‘text‘,
editable: false
}],
//通过Ext.getCmp(‘buttonSave‘).setText(‘添加‘)来改变文本
buttons: [{
id: ‘buttonSave‘,
text: ‘添加‘,
//单击按钮时调用的函数
handler: function() {
//提交表单前检测合法性
if (!form.getForm().isValid()) {
return;
}
if (form.getForm().findField("id").getValue() == "") {
// submit提交表单,提交的参数包括所有textfield的name属性的值
form.getForm().submit({
url: ‘./jsp/save.jsp‘,
//success的条件是后台相应true或者json的success属性为true
//不同于ajax的success，后者如果返回200即为success
success: function(f, action) {
if (action.result.success) {
Ext.Msg.alert(‘消息‘, action.result.msg, function() {
//重置表单
form.getForm().reset();
Ext.getCmp(‘buttonSave‘).setText(‘添加‘);
});
}
},
failure: function() {
Ext.Msg.alert(‘错误‘, "添加失败");
}
});
}
}
},{
//使用Ext.Ajax提交请求，如果返回200即为success
text: ‘删除‘,
handler: function() {
var id = form.getForm().findField(‘id‘).getValue();
if (id == ‘‘) {
Ext.Msg.alert(‘提示‘, ‘请选择需要删除的信息。‘);
} else {
Ext.Ajax.request({
url: ‘./jsp/remove.jsp‘,
success: function(response) {
var json = Ext.decode(response.responseText);
if (json.success) {
Ext.Msg.alert(‘消息‘, json.msg, function() {
grid.getStore().reload();
form.getForm().reset();
Ext.getCmp(‘buttonSave‘).setText(‘添加‘);
});
}
},
failure: function() {
Ext.Msg.alert(‘错误‘, "删除失败");
},
//手动传参
params: "id=" + id
});
}
}
}]
});
// form end
2、form自带url属性
如果表单只有一个按钮需要提交，那么在form配置属性url:‘add.jsp‘,
在button的handler中执行form.getForm.submit(...);即可提交
3、表单填充数据
//表单自动填充后台传来的json数据
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‘}
]);
form里设置属性
reader: reader,
//url返回的数据
[{
text: ‘textField‘,
number: 12.34,
date: ‘2008-01-01T00:00:00‘,
combo: 1
}]
//填充数据
form.getForm().load({url:‘10-01.txt‘});
4、给按钮设置图标
首先需要在html中定义样式
<style type=text/css>
.action-find {
background-image: url(images/user/action-find.gif );
}
</style>
在button的属性中设置
iconCls:‘action-find‘,
5、实现表单的textfield并排
var form = new Ext.form.FormPanel({
buttonAlign : ‘center‘,
title : ‘个人排名查询‘,
//是否有色背景
frame : false,
border : true,
labelAlign: ‘right‘,
labelWidth: 60,
items : [ {
layout : ‘column‘,
border : false,
defaults : {
// 去掉每个列（items的元素）各自的边框
border : false,
// 上右下左
bodyStyle : ‘padding:20px 0px 0px 120px;‘,
},
items : [
{
columnWidth : .5,
layout : ‘form‘,
defaultType : ‘textfield‘,
border : false,
items : [ {
fieldLabel : ‘姓名‘,
anchor : ‘50%‘
}, {
fieldLabel : ‘工号‘,
anchor : ‘50%‘
}, {
xtype : ‘datefield‘,
fieldLabel : ‘起始日期‘,
name : ‘date‘
}, {
xtype : ‘datefield‘,
fieldLabel : ‘结束日期‘,
name : ‘date‘
} ]
},
{
columnWidth : .5,
border : false,
layout : ‘form‘,
defaultType : ‘textfield‘,
items : [
{
xtype : "combo",
fieldLabel : ‘所属中心‘,
name : ‘combo‘,
store : new Ext.data.SimpleStore({
fields : [ ‘value‘, ‘text‘ ],
data : [ [ ‘value1‘, ‘武汉客服‘ ],
[ ‘value2‘, ‘成都客服‘ ] ]
}),
displayField : ‘text‘,
valueField : ‘value‘,
mode : ‘local‘,
emptyText : ‘请选择‘
},
{
xtype : "combo",
fieldLabel : ‘所属科室‘,
name : ‘combo‘,
store : new Ext.data.SimpleStore({
fields : [ ‘value‘, ‘text‘ ],
data : [ [ ‘value1‘, ‘金普卡五室‘ ],
[ ‘value2‘, ‘金普卡五室‘ ] ]
}),
displayField : ‘text‘,
valueField : ‘value‘,
mode : ‘local‘,
emptyText : ‘请选择‘
},
{
xtype : "combo",
fieldLabel : ‘所属组别‘,
name : ‘combo‘,
store : new Ext.data.SimpleStore({
fields : [ ‘value‘, ‘text‘ ],
data : [ [ ‘value1‘, ‘组1‘ ],
[ ‘value2‘, ‘组2‘ ] ]
}),
displayField : ‘text‘,
valueField : ‘value‘,
mode : ‘local‘,
emptyText : ‘请选择‘
} ]
}
]
} , {
border:false,
// button的方位，要放在buttons的上面的才有效
buttonAlign : ‘center‘,
// button最小的宽度
minButtonWidth : 60,
// 注意不要把button写进items，它是form的.
// 如果写进items，buttonAlign等相关属性要跟着
buttons : [ {
text : ‘查询‘,
iconCls:‘action-find‘
}, {
text : ‘导出EXCEL‘,iconCls:‘action-export-xls‘
} ]
}]
});
Done
时间： 2024-10-15 00:49:55