yes, you'r correct, my previous solution is a bad experience,

and my current solution, refactor all the item component in to a form panel, then use loadRecord to bind all the data. so what's do you think about this solution?

e.g.
Ext.define('Test.extjs', {
requires: ['Ext.form.Panel'],
extend: 'Ext.form.Panel',
report: {},
id: 'ReportDetailId',
headerPosition: false,
bodyPadding: 10,

config: {
layout: {
type: 'anchor'
},
items: [
{
fieldLabel: 'Name',
name: 'testName',
xtype: 'displayfield',
border: false,
columnWidth: 1,
anchor: '100%',
labelWidth: 130,
labelAlign: 'left',
labelStyle: 'font-weight: bold',
labelAlign: 'left',
layout: {
type: 'anchor'
},
value: ''
}]

},
setReport: function (report) {
console.log("populate report into ReportDetail");
this.getForm().loadRecord(report);
}
})

I think it's a better idea.