首页 > 代码库 > Extjs的form表单自动装载数据(通过Ext.data.Model的代理加载数据)

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 = "http://www.mamicode.com/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);			 }									});	}}

                                                         此文为原创,转载请说明转载地址