首页 > 代码库 > 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); } }); }}
此文为原创,转载请说明转载地址