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);
			 }
		});
	}
}

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

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