ExtJs 学习小笔记之表单提交

xiaoyeshen · 2014-09-04 20:30 · 1287次阅读

ExtJs提交表单有三种,这里就说说其中的2种

1.Ext的form表单自带Ajax提交

2.Ext的Ajax提交

Ext.onReady(function(){
	Ext.QuickTips.init();
	var form = new Ext.FormPanel({
		width:400,
		height:150,
		baseCls: 'x-plain',
		defaultType:'textfield',
		labelAlign:'right',
		labelWidth:70,
		bodyStyle: 'padding:10px 0 0;',
		items:[{
			fieldLabel:'用户名',
			id:'wb1',
			name:'uname',
			allowBlank:false,
			blankText:'用户名不能为空'
		},{
			inputType:'password',
			fieldLabel:'密码',
			id:'wb2',
			name:'upass',
			allowBlank:false,
			blankText:'密码不能为空'
		}]
	})
	var win = new Ext.Window({
		title : '表单交互',
		collapsible : true,
		buttonAlign : 'right', 
		items:form,
		buttons : [{
			text : '提交1(表单自带Ajax)',
			handler : function() {
				formAjaxSubmit();
			}
		},{
			text : '提交2(Ext原生Ajax)',
			handler : function() {
			 	extAjaxSubmit();
			}
		}]
	});
	
	win.show();
	function formAjaxSubmit(){
		if(!form.form.isValid())
			return;
		var params = form.getForm().getValues();
		form.form.doAction('submit',{
			url : 'formSubmit',
			method : 'post',
			params : params,
			success : function(form, action){
				Ext.Msg.alert('提示', action.result.xx);
			},
			failure : function(){
				Ext.Msg.alert('提示', '提交失败');
			}
		})
	}

	function extAjaxSubmit() {
		if (!form.form.isValid())
			return;
		var params = form.getForm().getValues();
		Ext.Ajax.request({
			url : 'formSubmit',
			success : function(resp) {
				Ext.Msg.alert('提示', Ext.util.JSON.decode(resp.responseText).xx);
			},
			failure : function() {
				Ext.Msg.alert('提示', '提交失败');
			},
			params : params
		});
	}

})

success属性只有在后台返回成功后才会执行里面的代码

faliure属性一般是指路径和网络原因失败,提交action的路径错误,网络原因失败的还不太明白

handler属性后面是可以直接写函数名称的,即:

handler : extAjaxSubmit

后台的返回语句:

response.getWriter().write("{success:true,xx:'验证成功'}");

Ext的Ajax提交的话,需要把返回的数据解析成Json数据:

 Ext.util.JSON.decode(resp.responseText)
收藏

暂无评论

登录后可以进行评论。没有账号?马上注册