日期:2014-05-16  浏览次数:20475 次

用extJs进行表单提交返回json对象

这个例子是用extJs表单提交和struts2结合的例子。

首先,要进行编写js文件,js中文件建立一个button按钮,然后单击的时候响应下面的事件,此处就省略对于button的编写。响应的函数如下

?

?function addProgramItem() {
??firstWindow.show(); // 显示窗口
?}

?//-------------添加费率的 -------------------------
?var firstWindow = new Ext.Window({
????title : '<span class="commoncss">添加费率表单<span>', // 窗口标题
????layout : 'fit', // 设置窗口布局模式
????width : 400, // 窗口宽度
????height : 300, // 窗口高度
????closable : false, // 是否可关闭
????collapsible : true, // 是否可收缩
????maximizable : true, // 设置是否可以最大化
????border : false, // 边框线设置
????constrain : true, // 设置窗口是否可以溢出父容器
????animateTarget : Ext.getBody(),
????pageY : 20, // 页面定位Y坐标
????pageX : document.body.clientWidth / 2 - 600 / 2, // 页面定位X坐标
????items : [myForm], // 嵌入的表单面板
????buttons : [{
???????text : '保??? 存',
??????//?iconCls : 'acceptIcon',
???????handler : function() {
????????submitTheForm();
???????}
??????}, {
???????text : '重??? 置',
??????//?iconCls : 'tbar_synchronizeIcon',
???????handler : function() {
????????myForm.getForm().reset();
???????}
??????}, {
???????text : '关??? 闭',
??????//?iconCls : 'deleteIcon',
???????handler : function() {
????????firstWindow.hide();
???????}
??????}]
???});

?

?var updateForm = new Ext.form.FormPanel({
????collapsible : false,
????border : true,
????labelWidth: 75, // label settings here cascade unless overridden
????????? frame:true,
????????? bodyStyle:'padding:5px 5px 0',
????????? width: 350,
????????? buttonAlign : 'center',
????????? defaults: {width: 230},
????????? defaultType: 'textfield',
????items: [
??????{
???????fieldLabel : '方案ID',
???????name : 'program_id',
???????readOnly : true,
???????fieldClass : 'x-custom-field-disabled',
???????xtype : 'textfield', // 设置为数字输入框类型
???????maxLength:40
??????},{
?????????????????? fieldLabel: '方案名称',
?????????????????? name: 'program_name',
?????????????????? allowBlank:false,
?????????????????? maxLength:40
?????????????? },{
?????????????????? fieldLabel: '计费模式',
?????????????????? name: 'compute_model',
?????????????????? allowBlank:false,
?????????????????? maxLength:2
?????????????? }, {
?????????????? ?xtype:'textarea',
?????????????????? fieldLabel: '方案描述',
?????????????????? name:'description',
?????????????????? maxLength:255
?????????????? },{
?????????????? ?fieldLabel:'方案状态',
?????????????? ?name:'tariff_program_state',
?????????????? ?allowBlank:false,
?????????????? ?maxLength:2,
?????????????? ?value:'00'
?????????????? },{
?????????????? ?fieldLabel:'操作人员',
?????????????? ?name:'operator',
?????????????? ?allowBlank:false,
?????????????? ?maxLength:20
?????????????? },{
?????????????? ?xtype:'datefield',
?????????????? ?fieldLabel :'操作时间',
????????? ???name:'op_time',
????????? ???allowBlank:false,
????????? ???format:'Y-m-d'
?????????????? }]
???});

?

?

?/**
? * 表单提交(表单自带Ajax提交)
? */
?function submitTheForm() {
??if (!myForm.getForm().isValid())
???return;
??myForm.form.doAction("submit",{
?????url : 'program_save.action',
?????waitTitle : '提示',
?????method : 'POST',
?????waitMsg : '正在处理数据,请稍候...',
?????success : function(form, action) { // 回调函数有2个参数
??????Ext.Msg.confirm('请确认', '新增成功,您要继续新增费率项目吗?', function(
??????????btn, text) {
?????????if (btn == 'yes') {
??????????myForm.getForm().reset();
?????????} else {
??????????firstWindow.hide();
??????????store.reload();
?????????}
????????});
?????},
?????failure : function(form, action) {
??????firstWindow.hide();
??????Ext.MessageBox.alert('提示', '数据保存失败');
?????}
????});
?}

?

?

当点击保存的时候就会访问program_save.action,这是struts.xml的配置,前提是struts的基本环境都配置好了,这里好像有struts的版本问题,因