Extjs的Form表单提交方式_JAVA_编程开发_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
热搜:
更多>>
 
您所在的位置: 程序员俱乐部 > 编程开发 > JAVA > Extjs的Form表单提交方式

Extjs的Form表单提交方式

 2014/9/19 12:42:54  zyjustin9  程序员俱乐部  我要评论(0)
  • 摘要:Extjs的Form表单提交方式一.直接提交:url写在表单中varaddForm=newExt.FormPanel({frame:true,url:"insertProject.eva?doType=insertProject",labelWidth:80,//labelAlign:"right",//buttonAlign:"center",items:[xmmcCombox,{name:"xmdw",xtype:"textfield",fieldLabel:"项目单位",readOnly
  • 标签:for 方式 表单 JS

Extjs的Form表单提交方式

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

class="js">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"));
}

?

?

上一篇: Java按照字节来截取字符串的工具,不会出现半个汉字 下一篇: 没有下一篇了!
发表评论
用户名: 匿名