CRUD的最后一部分了
详细信息页面可以通过两种方法显示:弹出对话框或直接在主区域显示
弹出的话,其实可以采用和编辑页面相同的模式编写,无非就是不能编辑而已(甚至很多传统系统都是直接采用同一个Form编写的)
这里介绍的呢,是稍微复杂点的模式,就是详细信息不光包含了数据本身,还会包含一系列的相关信息,例如:
销售机会的详细信息页面,不光包含了一条销售信息自身的数据,还包含了很多的相关附加信息,例如,该销售对象的联系人,竞争对手资料,联系记录,拜访记录,进度等等
人事档案的详细信息页面,会包含该人在学校学习的历史,在其他单位的工作历史,在公司的奖惩记录,合同鉴定记录,工资变更记录等等
ExtFrame里的详细页面,不光能自动加载主数据的详细信息,也可以自动加载附加数据,编写起来也非常简单
首先,显示详细页面模式,不采用command列设置的操作(当然不是不可以,不过不符合B/S习惯),而是采用link列,即显示成一条超链接模式,当点击超链接时弹出对话框(使用window.show)或显示到主区域(使用showPanel),比较复杂的详细信息页面一般显示到主区域上
对应的grid的列如下配置
<Column name="name" caption="项目名称" type="link" field="Name" width="200" link="javascript:opportunitydetailpanel.doShow('{id}');" linktext="{Name}"/>
配置项显示为项目名字,超链接点击为执行对应panel的doShow方法(这个方法里负责加载数据并把自己显示到主区域)
详细信息页面编写的Panel直接采用Panel套Panel模式显示
var opanel = new Ext.Panel({ tbar: opportunityinfobar, title: '销售机会', autoWidth: true, defaults: { collapsible: true, split: true, titleCollapse: true }, items: [opportunityinfopanel, competitorpanel, contactpanel] });
考虑到自动显示的滚动条,又要多套一层
var opportunitydetailpanel = new Ext.Panel({ frame: true, autoScroll: true, width: '100%', bodyStyle: 'overflow-x:hidden;', autoWidth: true, defaults: { collapsible: true, split: true, titleCollapse: true }, items: [opanel], doShow: function(id) { opportunityinfopanel.dataid = id; FormHandler.doRead(opportunityinfopanel); competitorgrid.linkValue = id; competitorgrid.read(); contactgrid.linkValue = id; contactgrid.read(); showPanel(opportunitydetailpanel); }, listeners: { show: function() { CommonButtonBuilder.buildToolbar(opportunityinfobar, 'editopportunity'); CommonButtonBuilder.buildToolbar(competitorbar, 'competitorquery'); CommonButtonBuilder.buildToolbar(contactbar, 'contactquery'); } } });
在这个详细信息的panel里,除了定义显示的子panel外,同时负责了这样几件事情:
1、加载附加信息的操作栏
2、加载数据
3、调用附加信息的查询
4、显示自己
详细信息部分,使用FormPanel显示,这样可以调用FormPanel.load方法自动加载
附加数据部分,考虑到脚本行数,每一项的代码都隔离到单独的脚本文件中(例如contact的代码全部写到contact.js里去),在脚本头里采用动态加载方法(document.write)加载(封装成import方法使看起来简单),这样看起来比较简洁,而且出问题时比较容易定位
每一项附加信息编写起来和一个普通的查询页面没有太多区别,例如,competitorpanel,就是一个对竞争对手的查询,只不过,带有默认参数:指定的销售机会ID
var competitorgrid = new LinkedQueryAllGrid({ frame: true, moniker: 'OpportunityCompetitor', gridName: 'opportunitycompetitor', width: '100%', linkField: 'OpportunityID', linkValue: '', autoHeight: true }); var competitorbar = new Ext.Toolbar(); var competitorpanel = new Ext.Panel({ title: '竞争对手情况', tbar: competitorbar, width: '100%', // height: 200, collapsible: true, items: [competitorgrid] });
看完了前面几篇的就会发现这个页面基本都是重用,只不过QueryGrid替换成了LinkedQueryAllGrid(增加了附加参数linkField和linkValue)
整个详细信息页面,需要额外编程的地方仍然很少----基本都是在编排页面布局,也就是doShow方法里需要加载数据而已
最后的显示效果是这样的(详细信息显示不正确部分参见BUG篇)