ストアによって入力されるリスト アイテムがあります。ストアがロードされると、リストは適切な高さでサイズ変更されないようです。高さは実際にはゼロです。ストアを読み込んだ後にリストの高さを再計算することについて何か推奨事項はありますか?
私の見解:
xtype: 'fieldset',
cls: 'damage-list-fieldset',
margin: '',
itemId: 'damageFieldSet',
flex: 1,
layout: {
type: 'fit'
},
items: [
{
xtype: 'list',
action: 'showNotes',
cls: 'damage-list',
itemCls: 'x-list-item-label',
itemId: 'DamageList',
disableSelection: true,
height: 'auto',
emptyText: 'No damage has been reported',
itemTpl: [
'<table border="0" width="100%">',
' <tr>',
' <td class="part" width="30%">{part}</td>',
' <td class="note" width="30%">{date}</td>',
' <td class="type" width="30%">{type}</td>',
' <td class="note" width="10%"><div class="count">{noteCount}</div></td>',
' </tr>',
'</table>',
''
],
store: 'Damage',
grouped: true,
onItemDisclosure: false
}
]
},
itemTpl にテーブルを含めるべきではないことに気付きましたが、今は無視しましょう。
これが私が現在それを機能させる方法です。コントローラー ストア ロード コールバックから高さをプッシュします。
Ext.getStore('Damage').load({
params: {repairOrderId: this.repairOrderId},
callback: function(records, operation, success) {
if(records.length) {
report.getComponent('noteInstruction').setHidden(records.length == 0);
/* Calculate the height of the damage rows and set it*/
var location = new Array();
var locationCount = 0;
for(var i = 0; i < records.length; i++) {
if(location.indexOf(records[i].data.location) < 0) {
location.push(records[i].data.location);
locationCount++;
}
}
var damageRow = 54;
var damageHeader = 56;
var damageHeight = (records.length * damageRow) + (locationCount * damageHeader);
report.getComponent('damageFieldSet').getComponent('DamageList').setHeight(damageHeight);
report.getComponent('damageFieldSet').getComponent('DamageList').setScrollable(false);
}
Ext.Viewport.setMasked(false);
},
scope: this
});
設定された高さでジャミングしているだけなので、あまりエレガントではありません。
問題は、ストアからレコードを取得した後、リストの高さを強制的に再描画するにはどうすればよいかということです。