先看效果

样品和审核记录是一对多的关系,通过XTemplate来展现数据。如果后台的数据是JSON格式的,这个事情就简单了,但是如果后台的数据是XML的,并且通过Model之间的hasmany关系来配置,就复杂一些了。

解决方案:

model.Sample.js

Ext.define("Soims.model.Sample", {    extend: 'Ext.data.Model',    requires: ['Soims.model.SampleAudit'], // 引用文件    fields: [        { name: 'id', mapping: 'ID' },        'index',        { name: 'sampleType', mapping: 'SampleType' }    ],    // 注意下面的hasmany的配置,因为audit是关联查询出来的,所以reader放在这里比较好    hasMany: { model: 'Soims.model.SampleAudit', name: 'SampleAudits', associationKey: 'SampleAudits',        reader: {            type: 'xml',            record: 'SampleAudit',            root: 'SampleAudits'        }    }});

model.SampleAudit.js

Ext.define("Soims.model.SampleAudit", {    extend: 'Ext.data.Model',    fields: [        { name: 'id', type: 'int', mapping: 'ID' },        { name: 'auditType', mapping: 'AuditType' },        { name: 'auditContent', mapping: 'AuditContent' },        { name: 'contentType', mapping: 'ContentType' },        { name: 'createTime', type: 'date', mapping: 'CreateTime' },        { name: 'auditerName', mapping: 'AuditerName' }    ],    belongsTo: [{ // 配置多对一关联        name: 'Sample',        model: 'Soims.model.Sample'    }]});

store.Sample.js

Ext.define("Soims.store.Sample", {    extend: 'Ext.data.Store',    model: 'Soims.model.Sample',    autoLoad: false,    groupField: 'leg',    proxy: {        type: 'ajax',        url: '',        reader: { // 注意                type: 'xml',                root: 'QueryResult',                record: 'Record',                totalProperty: 'Total',                id: 'ID'            }    }});

Grid中配置store.Sample.js的实例(略)

Grid中配置plugin,如下:

plugins: [{        ptype: 'associationrowexpander',        rowBodyTpl: new Ext.XTemplate(            '
',            '

样品类型: {data.sampleType}

', // 注意            '
审核记录
',            '
', // 注意                    '{data.auditerName}  {data.createTime:date("Y-m-d")}  审核{data.auditContent} 
', // 注意                '',            '',            '
'        )    }]

还需要对rowExpander的setCmp()方法做下修改:

getRowBodyContents: function(record) {       return rowBodyTpl.applyTemplate(record); // 其实就是这里改变了}

原本是把recrod.data做为数据源给XTemplate,但是对于hasmany是无法获取的。所以我们把record整个抛给了XTemplate,然后在实例化的时候,手动的搜索自己所需要的数据,主要是hansmany。