标签：
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
标签：
原文地址：http://www.cnblogs.com/xingyyy/p/4818717.html
