ExtFrame里的详细信息页面

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篇）