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方面
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();
},