没有合适的资源?快使用搜索试试~ 我知道了~
ExtJs实现数据加载和提交经典代码
5星 · 超过95%的资源 需积分: 15 65 下载量 173 浏览量
2009-02-26
13:22:06
上传
评论
收藏 9KB TXT 举报
温馨提示
试读
8页
在使用使用FormPanel时我们通常需要使用它的form对象来加载数据或提交数据。FormPanel中的 form对象为Ext.form.BasicForm类型的对象,它有load和submit方法分别用于加载数据和提交数据。而这两个方法都是通过调用 Ext.form.BasicForm中的doAction方法来操作的。doAction方法带有两个参数,其中第二个参数为从load或submit 方法传递过来的Ext.form.Action对象的配置数据(Config Options)
资源推荐
资源详情
资源评论
FormPanel实现数据加载和提交
在使用使用FormPanel时我们通常需要使用它的form对象来加载数据或提交数据。FormPanel中的 form对象为Ext.form.BasicForm类型的对象,它有load和submit方法分别用于加载数据和提交数据。而这两个方法都是通过调用 Ext.form.BasicForm中的doAction方法来操作的。doAction方法带有两个参数,其中第二个参数为从load或submit 方法传递过来的Ext.form.Action对象的配置数据(Config Options)。其中的success和failure属性是用于处理请求成功或失败的函数。但需要注意的是,文档中的说明是这个success或 failure取决于Http请求过程是否出错。实际情况却并非这样,我在开发过程中发现HTTP响应代码一直都是200,但被调用的函数却一直都是 failure属性对应的函数。通过查看Action.js可以发现响应过来的数据是需要符合一定格式的,Ext.form.Action.Load的 API文档开头就说明了响应数据包必须类似下面的格式:
{
success: true,
data: {
clientName: "Fred. Olsen Lines",
portOfLoading: "FXT",
portOfDischarge: "OSL"
}
}这个说明在我使用ExtJS的时候再次误导了我。我认为只需要响应的数据为类似的格式就可以了。结果仍然出错,查看Action.js中的 handleResponse方法可以看出,返回的数据为上面代码的格式,但并不是说从服务端发送过来的数据就是这样的格式,而是需要将 Ext.form.Action.Load的result属性设置成上面的格式的数据。从handleResponse也可以看出,Action.js使 用了form.reader属性来处理服务端数据。这个属性也可以在初始化FormPanel的时候传递给FormPanel,FormPanel将会把 这个属性传递给它内置的BasicForm对象。怎样使用JsonReader来使提取响应数据来使它满足PanelForm的要求呢?再看 handleResponse中的代码,在reader存在的情况下,它返回的是所需要的格式的数据,一个包含success属性和data属性的对象, 而data属性来自于JsonReader的read方法处理后的结果。再查看JsonReader.js中的read方法,它调用的是 readRecords来读取数据,而返回的值是由reader的root属性决定的,从JsonReader.js中还可以看出,root属性对应的 JSON对象必须是集合类型的,因此我们在后台发送过来的数据必须也是集合类型,我在这里也出了错。一直认为加载数据到Form里,一次只加载一条,所以 从服务端传递过来的数据都是单个的对象,而将JsonReader对象的root设置为单个对象的名称,结果Form中一直都加载不上数据。后来将服务端 传递过来的数据修改为集合数型问题解决了。
小结:
ExtJS中JsonReader对于数据的处理总是一致的,不管你需要的是单条记录还是多条记录,它总是通过total属性判断记录数,通过root属性对应的名称来取记录集合。
FormPanel中处理数据的为内置的BasicForm类型的对象,它通过load和submit方法来加载或提交数据。而这两个方法是通过 Ext.form.Action的两个子类Ext.form.Action.Load、Ext.form.Action.Submit来提交请求和调用用 户的success和failure方法。决定调用success和failure的并非Http请求是否出错,而是决定于Action.js中 handleResponse的处理结果。我们可以通过设置FormPanel的reader配置对象来干预handleResponse对数据的处理。 而这个reader也可设置响应数据与FormPanel中字段的对应关系。
多看源码,可以获取更多。
附:
表格中双击进行编辑的JS源码,这个代码比官方文档中的处理方式简单一些,觉得官方文档中的edit中加载数据的处理是一种hack的方式,并不太适合实际应用。
ExtJS网站上的CRUD的文章,其中包含有加载数据进行编辑的例子
Ext.onReady(function(){
var newFormWin;
var form1;
在使用使用FormPanel时我们通常需要使用它的form对象来加载数据或提交数据。FormPanel中的 form对象为Ext.form.BasicForm类型的对象,它有load和submit方法分别用于加载数据和提交数据。而这两个方法都是通过调用 Ext.form.BasicForm中的doAction方法来操作的。doAction方法带有两个参数,其中第二个参数为从load或submit 方法传递过来的Ext.form.Action对象的配置数据(Config Options)。其中的success和failure属性是用于处理请求成功或失败的函数。但需要注意的是,文档中的说明是这个success或 failure取决于Http请求过程是否出错。实际情况却并非这样,我在开发过程中发现HTTP响应代码一直都是200,但被调用的函数却一直都是 failure属性对应的函数。通过查看Action.js可以发现响应过来的数据是需要符合一定格式的,Ext.form.Action.Load的 API文档开头就说明了响应数据包必须类似下面的格式:
{
success: true,
data: {
clientName: "Fred. Olsen Lines",
portOfLoading: "FXT",
portOfDischarge: "OSL"
}
}这个说明在我使用ExtJS的时候再次误导了我。我认为只需要响应的数据为类似的格式就可以了。结果仍然出错,查看Action.js中的 handleResponse方法可以看出,返回的数据为上面代码的格式,但并不是说从服务端发送过来的数据就是这样的格式,而是需要将 Ext.form.Action.Load的result属性设置成上面的格式的数据。从handleResponse也可以看出,Action.js使 用了form.reader属性来处理服务端数据。这个属性也可以在初始化FormPanel的时候传递给FormPanel,FormPanel将会把 这个属性传递给它内置的BasicForm对象。怎样使用JsonReader来使提取响应数据来使它满足PanelForm的要求呢?再看 handleResponse中的代码,在reader存在的情况下,它返回的是所需要的格式的数据,一个包含success属性和data属性的对象, 而data属性来自于JsonReader的read方法处理后的结果。再查看JsonReader.js中的read方法,它调用的是 readRecords来读取数据,而返回的值是由reader的root属性决定的,从JsonReader.js中还可以看出,root属性对应的 JSON对象必须是集合类型的,因此我们在后台发送过来的数据必须也是集合类型,我在这里也出了错。一直认为加载数据到Form里,一次只加载一条,所以 从服务端传递过来的数据都是单个的对象,而将JsonReader对象的root设置为单个对象的名称,结果Form中一直都加载不上数据。后来将服务端 传递过来的数据修改为集合数型问题解决了。
小结:
ExtJS中JsonReader对于数据的处理总是一致的,不管你需要的是单条记录还是多条记录,它总是通过total属性判断记录数,通过root属性对应的名称来取记录集合。
FormPanel中处理数据的为内置的BasicForm类型的对象,它通过load和submit方法来加载或提交数据。而这两个方法是通过 Ext.form.Action的两个子类Ext.form.Action.Load、Ext.form.Action.Submit来提交请求和调用用 户的success和failure方法。决定调用success和failure的并非Http请求是否出错,而是决定于Action.js中 handleResponse的处理结果。我们可以通过设置FormPanel的reader配置对象来干预handleResponse对数据的处理。 而这个reader也可设置响应数据与FormPanel中字段的对应关系。
多看源码,可以获取更多。
附:
表格中双击进行编辑的JS源码,这个代码比官方文档中的处理方式简单一些,觉得官方文档中的edit中加载数据的处理是一种hack的方式,并不太适合实际应用。
ExtJS网站上的CRUD的文章,其中包含有加载数据进行编辑的例子
Ext.onReady(function(){
var newFormWin;
var form1;
//表格处理
//Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
Ext.QuickTips.init();
var sm = new Ext.grid.CheckboxSelectionModel(); //CheckBox选择列
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(), //行号列
sm,
{header:'编号',dataIndex:'id'},
{header:'性别',dataIndex:'sex',renderer:function(value){
if(value=='1'){
return "男";
}else{
return "女";
}
}}, //增加性别,自定义renderer,即显示的样式,可以加html代码,来显示图片等。
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'memo'}
]);
var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:ACTION_URL}),//调用的动作
reader: new Ext.data.JsonReader({
totalProperty: 'total',
root: 'list',
successProperty :'success'
},
[{name: 'id',mapping:'id',type:'string'},
{name: 'sex',mapping:'sex',type:'string'},
{name: 'name',mapping:'name',type:'string'},
//Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
Ext.QuickTips.init();
var sm = new Ext.grid.CheckboxSelectionModel(); //CheckBox选择列
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(), //行号列
sm,
{header:'编号',dataIndex:'id'},
{header:'性别',dataIndex:'sex',renderer:function(value){
if(value=='1'){
return "男";
}else{
return "女";
}
}}, //增加性别,自定义renderer,即显示的样式,可以加html代码,来显示图片等。
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'memo'}
]);
var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:ACTION_URL}),//调用的动作
reader: new Ext.data.JsonReader({
totalProperty: 'total',
root: 'list',
successProperty :'success'
},
[{name: 'id',mapping:'id',type:'string'},
{name: 'sex',mapping:'sex',type:'string'},
{name: 'name',mapping:'name',type:'string'},
剩余7页未读,继续阅读
资源评论
- China_Gril2013-11-22有参考价值,谢谢分享
stone_web
- 粉丝: 15
- 资源: 4
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功