extJS中常用的4種Ajax異步提交方式
* 第一種Ajax提交方式
* 這種方式需要直接使用ext Ajax方法進(jìn)行提交
* 使用這種方式,需要將待傳遞的參數(shù)進(jìn)行封裝
* @return
*/
function saveUser_ajaxSubmit1() {
Ext.Ajax.request( {
url : 'user_save.action',
method : 'post',
params : {
userName : document.getElementById('userName').value,
password : document.getElementById('password').value
},
success : function(response, options) {
var o = Ext.util.JSON.decode(response.responseText);
alert(o.msg);
},
failure : function() {
}
});
}
/**
* 第二種Ajax提交方式
* 這種方式將為ext的ajax指定一個(gè)html表單
* 使用這種方式,不需要將待傳遞的參數(shù)進(jìn)行封裝
*
* @return
*/
function saveUser_ajaxSubmit2() {
Ext.Ajax.request( {
url : 'user_save.action',
method : 'post',
form : 'userForm', // 指定表單
success : function(response, options) {
var o = Ext.util.JSON.decode(response.responseText);
alert(o.msg);
},
failure : function() {
}
});
}
/**
* 第三種Ajax提交方式
* 這種方式將為ext的自己的表單進(jìn)行提交
* 使用這種方式,需要使用ext自己的textField組件
*
* @return
*/
function saveUser_ajaxSubmit3() {
// 定義表單
var formPanel = new Ext.FormPanel( {
labelWidth : 75,
frame : true,
bodyStyle : 'padding:5px 5px 0',
width : 350,
defaults : {
width : 230
},
defaultType : 'textfield',
items : [ {
fieldLabel : '用戶名',
name : 'userName',
allowBlank : false
}, {
fieldLabel : '密 碼',
name : 'password'
} ]
});
// 定義窗口
var win = new Ext.Window( {
title : '添加用戶',
layout : 'fit',
width : 500,
height : 300,
closeAction : 'close',
closable : false,
plain : true,
items : formPanel,
buttons : [ {
text : '確定',
handler : function() {
var form = formPanel.getForm();
var userName = form.findField('userName').getValue().trim();
var password = form.findField('password').getValue().trim();
if (!userName) {
alert('用戶名不能為空');
return;
}
if (!password) {
alert('密碼不能為空');
return;
}
form.submit( {
waitTitle : '請稍后...',
waitMsg : '正在保存用戶信息,請稍后...',
url : 'user_save.action',
method : 'post',
success : function(form, action) {
alert(action.result.msg);
},
failure : function(form, action) {
alert(action.result.msg);
}
});
}
}, {
text : '取消',
handler : function() {
win.close();
}
} ]
});
win.show();
}
/**
* 第四種Ajax提交方式
* 這種方式將html的表單轉(zhuǎn)化為ext的表單進(jìn)行異步提交
* 使用這種方式,需要定義好html的表單
*
* @return
*/
function saveUser_ajaxSubmit4() {
new Ext.form.BasicForm('userForm').submit( {
waitTitle : '請稍后...',
waitMsg : '正在保存用戶信息,請稍后...',
url : 'user_save.action',
method : 'post',
success : function(form, action) {
alert(action.result.msg);
},
failure : function(form, action) {
alert(action.result.msg);
}
});
}
- Extjs grid添加一個(gè)圖片狀態(tài)或者按鈕的方法
- ExtJS[Desktop]實(shí)現(xiàn)圖標(biāo)換行示例代碼
- 解決Extjs上傳圖片無法預(yù)覽的解決方法
- ExtJs之帶圖片的下拉列表框插件
- ExtJS 4.2 Grid組件單元格合并的方法
- ExtJS4的文本框(textField)使用正則表達(dá)式進(jìn)行驗(yàn)證(Regex)的方法
- ExtJS4給Combobox設(shè)置列表中的默認(rèn)值示例
- ExtJS4如何自動(dòng)生成控制grid的列顯示、隱藏的checkbox
- ExtJS4 表格的嵌套 rowExpander應(yīng)用
- extjs4 treepanel動(dòng)態(tài)改變行高度示例
- ExtJS4中的requires使用方法示例介紹
- extjs4圖表繪制之折線圖實(shí)現(xiàn)方法分析
相關(guān)文章
ExtJs GridPanel簡單的增刪改實(shí)現(xiàn)代碼
ExtJs GridPanel中實(shí)現(xiàn)增刪改效果的代碼,需要的朋友可以參考下。2010-08-08ExtJS4給Combobox設(shè)置列表中的默認(rèn)值示例
這篇文章主要介紹了ExtJS4如何給Combobox設(shè)置列表中的默認(rèn)值,需要的朋友可以參考下2014-05-05Extjs 3.3切換tab隱藏相應(yīng)工具欄出現(xiàn)空白解決
在切換tabpanel的時(shí)候,把相應(yīng)的工具欄隱藏掉,結(jié)果出現(xiàn)空白,先熊板板的空白不過后來終于解決,接下來與大家分享下解決技巧,感興趣的朋友可以參考下哈2013-04-04Ext中下拉列表ComboBox組件store數(shù)據(jù)格式用法介紹
本文為大家詳細(xì)介紹下Ext中下拉列表ComboBox組件store數(shù)據(jù)格式的基本用法,感興趣的朋友可以參考下哈,希望對大家有所幫助2013-07-07extjs中g(shù)rid中嵌入動(dòng)態(tài)combobox的應(yīng)用
今天需要在grid中嵌入combobox,在網(wǎng)上找了好久也沒有找到一個(gè)正確可行的方法,可能是版本問題(我版本是extjs 3.0),沒有繼續(xù)研究其原因,自己查找資料,終于實(shí)現(xiàn)功能?,F(xiàn)在分享一下代碼。2011-01-01Ext JS 4實(shí)現(xiàn)帶week(星期)的日期選擇控件(實(shí)戰(zhàn)一)
有一些日期選擇的需求是要看到星期,就是日期中的哪一天是這一年的第幾周,遺憾的是Ext js 并沒有提供這樣的配置,下面為大家分享下理想的解決方法2013-08-08Extjs 繼承Ext.data.Store不起作用原因分析及解決
有關(guān)Extjs 繼承Ext.data.Store 不起作用的原因有很多種,接下來與大家分享下,本人遇到的,這個(gè)Store寫出來之后 是不會(huì)起到作用的,感興趣的朋友可以看下詳細(xì)的原因及解決方法2013-04-04解決extjs grid 不隨窗口大小自適應(yīng)的改變問題
在使用grid的時(shí)候窗口改變了但是grid卻不能自適應(yīng),下面有個(gè)不粗的解決方法,大家可以參考下2014-01-01