先看效果
样品和审核记录是一对多的关系,通过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。