Extjs的form表单自动装载数据(通过Ext.data.Model的代理加载数据)
在做项目的时候遇到一个问题,以前双击grid页面一行数据的时候,会吧双击这一行的数据自动加载到双击的页面(Ext的弹出框),可以通过this.down(‘‘form).getForm().loadRecord(record)来自动加载,可是现在有一个需求就是双击grid一行弹出一个新的浏览器页面(不是ext的弹出框,通过window.open()实现),只能把双击的id传到页面,再重新查数据手动赋值,如果一个页面字段很多,一个一个赋值是很辛苦的,所以就想能不能自动装载数据
通过长时间研究发现,this.down(‘‘form).getForm().loadRecord(record)其中的record其实就是一个Ext.data.Model对象,如果我把查出来的数据封装成model对象在通过这个方法不就可以自动加载了,通过实验真的可以.下面是代码
1:前台Ext的form表单代码,说明:定义一个‘selectName‘的Ext.data.Model对象通过ajax代理访问后台数据,此时这个代码只是定义,还不能执行方法获得数据
var selectName=Ext.define(‘selectName‘, {
extend : ‘Ext.data.Model‘,
fields : [‘id‘,‘bugNumber‘,‘title‘],
proxy:{
type:‘ajax‘,
url : ‘pribugmanage/controller/getTestData‘
}
});
2:后台是SpringMVC(这里不做过多解释),说明:通过后台返回map对象,map的key值要对应ext中form表单里面字段的name名字
/**
* 问题单库,添加,查询,审批
*/
@Controller
@RequestMapping("/pribugmanage/controller")
public class PrjBugManagerController {
/**
* 获取数据
*/
@RequestMapping(value = "/getTestData")
@ResponseBody
public Map<String, Object> getTestData(final Integer id) {
return prjBugManagerService.getTestData(id);
}
@Autowired
private PrjBugManagerService prjBugManagerService;
}
3: 1和2两个步骤只是定义好啦,要想完成查询还要执行第三步 (dataId是一个ID通过id获得需要查询的数据)
这里通过监听,监听页面加载之后,通过刚才定义的个‘selectName‘的Ext.data.Model对象的load方法来执行访问后台,执行成功之后调用回调函数的success方法,这里面就会返回一个record对象,也就是Ext.data.Model,这是我们就可以通过me.down(‘form‘).getForm().loadRecord(record);来给当前的form表单自动装载数据了
listeners:{
render:function(){
selectName.load(dataId,{
success: function(record,operation) {
me.down(‘form‘).getForm().loadRecord(record);
}
});
}
}
此文为原创,转载请说明转载地址
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
