Extjs的Form表单提交方式

最新推荐文章于 2022-05-14 11:25:47 发布

莯枫

最新推荐文章于 2022-05-14 11:25:47 发布

阅读量1.6k

点赞数

分类专栏： Extjs 文章标签： Java Extjs Form

本文链接：https://blog.csdn.net/zyjustin9/article/details/84654422

版权

Extjs 专栏收录该内容

34 篇文章 1 订阅

订阅专栏

Extjs的Form表单提交方式

一.直接提交：url写在表单中

var addForm = new Ext.FormPanel({
	frame: true,
	url:"insertProject.eva?doType=insertProject",
	labelWidth: 80,
	//labelAlign: "right",
	//buttonAlign:"center",
	items:[
		xmmcCombox,
		{	
			name:"xmdw",
			xtype:"textfield",
			fieldLabel:"项目单位",
			readOnly:true,
			width:200
		},{
			name:"depart",
			xtype:"textfield",
			fieldLabel:"主管部门",
			readOnly:true,
			width:200
		},
		typeRadio,
		modeRadio,
		agencyRadio
	],
	buttons:[
		{
			text:"确认",
			handler:function(){
				addForm.getForm().submit({
					method:"POST",
					waitMsg:"保存中，请稍后..."
				});
				addWin.hide();
			}
		},{
			text:"取消",
			handler:function(){
				addWin.hide();
			}
		}
	]
});

二.在submit()方法中获取参数值，设置URL，并提交

var addForm = new Ext.FormPanel({
	frame: true,
	labelWidth: 80,
	//labelAlign: "right",
	//buttonAlign:"center",
	items:[
		xmmcCombox,
		{	
			name:"xmdw",
			xtype:"textfield",
			fieldLabel:"项目单位",
			readOnly:true,
			width:200
		},{
			name:"depart",
			xtype:"textfield",
			fieldLabel:"主管部门",
			readOnly:true,
			width:200
		},
		typeRadio,
		modeRadio,
		agencyRadio
	],
	buttons:[
		{
			text:"确认",
			handler:function(){
				var thisForm = addForm.getForm();
				if(thisForm.isValid()){
					var submitValues = thisForm.getValues();
                    //提交表单
                    thisForm.submit({
                    	url:"insertProject.eva?doType=insertProject",
                    	method:"POST",
                    	waitMsg:"保存中，请稍后...",
                    	params:submitValues,
                    	success:function(){
                    		Ext.Msg.alert('成功', "增加了一个新的项目绩效信息！");
		            		addWin.hide();
                    	},
                    	failure:function(form,action){
                    		Ext.Msg.alert('失败', "保存项目绩效信息失败！");
                    	}
                    });
				}
				addWin.hide();
			}
		},{
			text:"取消",
			handler:function(){
				addWin.hide();
			}
		}
	]
});

注意查看url的位置区别！

实例分析：

1.ExtJs前端代码提交表单：

/**
 * -----------------------------------------
 * ======点击下拉按钮获取项目名称，项目单位，主管部门======
 * -----------------------------------------
 */
/*-----1.创建数据源-----*/
var xmmcStore = new Ext.data.Store({
	proxy:	new Ext.data.HttpProxy({
				url:'getXmmc.eva?doType=getXmmc'
			}),
    reader: new Ext.data.JsonReader(
    		{root: 'data'},
    		['id','name']
    )
});

/*-----2.创建项目名称下拉列表-----*/
var xmmcCombox = new Ext.form.ComboBox({
	fieldLabel:"项目名称",
	store:xmmcStore,
	displayField:"name",
	valueField:"id",
	hiddenName:"projectId",
	triggerAction:"all",
	emptyText:"请选择",
	editable:false,
	listeners:{
		/*"expand":function(){
			xmmcStore.load();
		},*/
		"select":function(obj, record){
			itemStore.baseParams.xmid = record.get('id');
			itemStore.load();
		}
	}
});
/*-----3.创建获取单位和主管部门数据源-----*/
var itemProxy = new Ext.data.HttpProxy({
	url:"getItem.eva?doType=getItem"
});
var itemReader = new Ext.data.JsonReader(
	{root:"data"},
	["company","department"]
);
var itemStore = new Ext.data.Store({
	proxy:itemProxy,
	reader:itemReader
});
//加载Store，并将数据赋值到文本框
itemStore.on('load', function (store, record, options) {
	var comp = record[0].get("company");
	var dept = record[0].data.department;
	addForm.getForm().findField("xmdw").setValue(comp);
	addForm.getForm().findField("depart").setValue(dept);
});

/**
 * --------------------
 * ======增加项目窗口======
 * --------------------
 */
/*-----1.创建单选框按钮组-----*/
//评价类型单选框
var typeRadio = new Ext.form.RadioGroup({
	fieldLabel:"评价类型",
	items:[{
		layout: 'column',
		items: [
			{
				name:"etype",
				inputValue:"1",
				boxLabel:"事前评价",
				checked:true,
				width:100
			},{
				name:"etype",
				inputValue:"2",
				boxLabel:"事中评价",
				width:100
			},{
				name:"etype",
				inputValue:"3",
				boxLabel:"事后评价",
				width:100
			}
		]
	}]
});
//评价方式单选框
var modeRadio = new Ext.form.RadioGroup({
	fieldLabel:"评价方式",
	items:[{
		layout:"column",
		items:[
			{
				name:"emode",
				inputValue:"1",
				boxLabel:"单位绩效自评",
				checked:true,
				width:100
			},{
				name:"emode",
				inputValue:"2",
				boxLabel:"财政部门组织评价",
				width:100
			}
		]
	}]
});
//评价机构单选框
var agencyRadio = new Ext.form.RadioGroup({
	fieldLabel:"评价机构",
	items:[{
		layout:"column",
		items:[
			{
				name:"eagency",
				inputValue:"1",
				boxLabel:"中介机构",
				checked:true,
				width:100
			},{
				name:"eagency",
				inputValue:"2",
				boxLabel:"单位评价组",
				width:100
			},{
				name:"eagency",
				inputValue:"3",
				boxLabel:"财政评价组",
				width:100
			}
		]
	}]
});
/*-----2.创建表单-----*/
var addForm = new Ext.FormPanel({
	frame: true,
	labelWidth: 80,
	//labelAlign: "right",
	//buttonAlign:"center",
	items:[
		xmmcCombox,
		{	
			name:"xmdw",
			xtype:"textfield",
			fieldLabel:"项目单位",
			readOnly:true,
			width:200
		},{
			name:"depart",
			xtype:"textfield",
			fieldLabel:"主管部门",
			readOnly:true,
			width:200
		},
		typeRadio,
		modeRadio,
		agencyRadio
	],
	buttons:[
		{
			text:"确认",
			handler:function(){
				var thisForm = addForm.getForm();
				if(thisForm.isValid()){
					var submitValues = thisForm.getValues();
                    //提交表单
                    thisForm.submit({
                    	url:"insertProject.eva?doType=insertProject",
                    	method:"POST",
                    	waitMsg:"保存中，请稍后...",
                    	params:submitValues,
                    	success:function(){
                    		Ext.Msg.alert('成功', "增加了一个新的项目绩效信息！");
		            		addWin.hide();
                    	},
                    	failure:function(form,action){
                    		Ext.Msg.alert('失败', "保存项目绩效信息失败！");
                    	}
                    });
				}
				addWin.hide();
			}
		},{
			text:"取消",
			handler:function(){
				addWin.hide();
			}
		}
	]
});

/*-----3.创建窗口-----*/
var addWin = new Ext.Window({
	title:"增加任务",
	layout:"fit",
	height:280,
	closeAction:"hide",
	width:350,
	items:addForm
});

需要注意的参数名：

1.ComboBox：hiddenName:"projectId"---valueField:"id"

2.Textfield：name---value(store赋值的value)

3.Radio：name---inputValue

2.Java后台代码获取提交的表单数据：

else if ("insertProject".equals(action)) {
	int projectId = Integer.valueOf(request.getParameter("projectId"));
	String company = request.getParameter("xmdw");
	String department = request.getParameter("depart");
	int etype = Integer.valueOf(request.getParameter("etype"));
	int emode = Integer.valueOf(request.getParameter("emode"));
	int eagency = Integer.valueOf(request.getParameter("eagency"));
}