extjs ajax死活传不过值,EXTJs前端传值的几种方式

这篇博客详细介绍了ExtJS中使用Ajax进行交互的方法,包括Ext.Ajax.request的基本使用,模型(model)、表单(form)及数据源(store)的交互操作。通过实例展示了数据的提交、加载、保存与同步,以及错误处理。重点讲解了store的sync方法在数据更新过程中的作用。
摘要由CSDN通过智能技术生成

Ajax交互方式

以前看书上说Extjs是一个ajax框架,ajax应该是基础的方式哈

Ext.Ajax.request( {

//被用来向服务器发起请求默认的url

url : "",

//请求时发送后台的参数,既可以是Json对象,也可以直接使用“name = value”形式的字符串

params : {

name:'value'

},

//请求时使用的默认的http方法

method : "post",

//请求成功时回调函数

success : function() {

Ext.ux.Toast.msg("信息提示", "成功删除所选记录!");

},

//请求失败时回调函数

failure : function() {

Ext.ux.Toast.msg("信息提示", "信息删除出错,请联系管理员!");

}

}

);

案例

Ext.Ajax.request({

url:'xxx/xxx.do',

jsonData:jsonArray,

success:function(response, action){var responseObj =Ext.decode(response.responseText);

me.unmask();

me.getStore().reload();if(responseObj.success === true || responseObj.success === 'true') {returnExt.ux.Toast.msg(responseObj.message);

}else{returnExt.ux.Toast.msg(responseObj.message);

}

},

scope:this}) ;

Model交互方式

form方面

//提交数据

formPanel.getForm().submit(

{

method : "post",

params : {

name:'value'

},

waitMsg : "正在提交数据",

success : function(b, c) {

Ext.ux.Toast.msg("操作信息", "提交成功!");

},

failure : function(b, c) {

Ext.ux.Toast.msg("操作信息", "提交失败!");

}

}

);

form.getRecord().save({

success: function (record, operation) {

record.commit();

if(store.indexOf(record) == -1) {

store.add(record);

}

Ext.ux.Toast.msg("修改成功");

},

failure: function (record, operation) {

record.reject();

Ext.ux.Toast.msg("修改失败 原因:"+operation.error);

},

scope: me

})

//加载数据

formPanel.getForm().load(

{

deferreRender : false,

url : "",

method : "post",

waitMsg : "正在载入数据",

success : function(e, g) {

var num = g.result.data.num;

var numCmp = Ext.getCmp("num");

numCmp.setValue(num);

Ext.ux.Toast.msg("操作信息", "载入成功");

},

failure : function(a, b) {

Ext.ux.Toast.msg("操作信息", "载入失败");

}

}

model方面

056a31f9bbd90fc004f48cf618b27026.png

model.load(record.data.id, {

scope:this,

failure:function(record, operation) {//do something if the load failed

},

success:function(record, operation) {var form =xxx;if(form.isHidden()) {

form.show();

form.loadRecord(record);

}

},

callback:function(record, operation) {//do something whether the load succeeded or failed

}

});

数据源store

store通常是作为grid的数据源,以便来更新grid的数据.其实这也是它最正规的用法,但其也可以把它作为与后台交互的一种方法,前提是只需向后台发送数据,而不需要接收后台返回的数据.

创建一个公共的store,不与任何表有联系,只需要下面简单的几句话

var publicstore = Ext.create('Ext.data.Store', {

proxy : {

type : 'ajax',

url : ''

}

});

如果只是想往后台传个数据的话

publicstore.proxy.url='a.action?id=1';

publicstore.load();

onSave:function(button,e) {//alert("123");

var me=this,

form=me.getForm(), //提供此面板的窗体访问

grid=me.getGrid(),//提供此面板的窗体访问

selModel=grid.getSelectionModel(),//列表获取选中的记录

record=form.getRecord(),//表单获取记录

phantom=record.phantom,//当服务器数据库还不存在的对象为真,任何真实的数据库pk集作为其id属性的记录都不为幻象--他是真实的

store=grid.getStore(),//grid获取数据

selIndex=-1;//选中下标

if(form.getForm().isValid()){//函数检查表单是否具有所有的有效字段

store.lastSelected=record;//grid最后选中的记录

form.updateRecord();//表单改变

//*****新增保存

if(phantom){//服务端不存在记录

store.add(record);//grid新增一条数据

}//******修改保存

store.proxy.writer.allowSingle = true;//配置为false,以确保始终将记录封装在数组中,即使只发送一条记录。当有多个记录时,它们总是被编码成一个数组。

selModel.lastSelected && store.each(function(record,index){//最后选中的记录 each 每条记录都去查一下

if(selModel.lastSelected ==record){

selIndex= index;//下标

return false;//跳出这个循环

}

});

store.sync({//数据同步

success:function(batch,options){

store.commitChanges();//grid提交所有未完成更改的记录,要处理要更改的更新

selModel.select(Math.min(selIndex,store.getCount()));/** selModel.select 当前选中那种的数组

* Math.min 数字最小

* store.getCount()获取存储中的记录数量。

**/},

failure:function(e,options){拒绝对所有修改过的记录进行未完成的更改,并重新插入在本地删除的任何记录。任何虚假记录将被删除。

store.rejectChanges();

},

scope:me

});

}

}

sync方法部分源码

sync: function(options) {var me = this,

operations={},

toCreate=me.getNewRecords(),

toUpdate=me.getUpdatedRecords(),

toDestroy=me.getRemovedRecords(),

needsSync= false;if (toCreate.length > 0) {

operations.create=toCreate;

needsSync= true;

}if (toUpdate.length > 0) {

operations.update=toUpdate;

needsSync= true;

}

getUpdatedRecords:function() {return this.data.filterBy(this.filterUpdated).items;

},

filterBy :function(fn, scope) {var me = this,

newMC= newme.self(me.initialConfig),

keys=me.keys,

items=me.items,

length=items.length,

i;

newMC.getKey=me.getKey;for (i = 0; i < length; i++) {if (fn.call(scope ||me, items[i], keys[i])) {

newMC.add(keys[i], items[i]);

}

}returnnewMC;

},

filterUpdated:function(item) {return item.dirty === true && item.phantom !== true &&item.isValid();

},

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值