Extjs 由于高度未定义，列表项未显示

我有一个由商店填充的列表项。加载存储后，列表似乎无法以适当的高度调整大小。高度实际上是零。你们有什么建议让列表在加载商店后重新计算其高度吗

我的看法是：

            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
                }
            ]
        },

xtype:'fieldset'，
cls:“伤害列表字段集”，
页边空白：''，
itemId:'damageFieldSet'，
弹性：1，
布局：{
类型：“适合”
},
项目：[
{
xtype:'列表'，
行动：‘showNotes’，
cls:‘损坏清单’，
itemCls:'x-list-item-label'，
itemId:'损坏列表'，
disableSelection:正确，
高度：“自动”，
emptyText:'未报告任何损坏'，
第三方物流：[
'',
'    ',
“{part}”，
“{date}”，
“{type}”，
“{noteCount}”，
'    ',
'',
''
],
商店：“损坏”，
对,，
无巩膜：假
}
]
},

我意识到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
    });

Ext.getStore（'Damage'）。加载({
参数：{repairOrderId:this.repairOrderId}，
回调：函数（记录、操作、成功）{
if（记录长度）{
report.getComponent（'noteInstruction'）.setHidden（records.length==0）；
/*计算损坏行的高度并进行设置*/
var location=新数组（）；
var locationCount=0；
对于（var i=0；i

不是很优雅，因为我只是在一个固定的高度卡住

---

因此，问题是，在从存储区取回记录后，如何强制列表重新绘制其高度？

加载过程是异步的，您从加载中的回调不一定会影响列表

• 高度可以从list.element.html读取，您不需要计算高度，因为列表已经有一个列表
• Load已自动更新列表
• Sencha 2.2.1的列表组件是以不同的方式生成的。它只生成可见项目数加1，并切换listitems的位置
• 高度：'auto'最好替换为flex:1

我建议你

• 删除您的回拨
• 打电话给商店，看看商店里是否有商品
• 将listitem高度设置为固定值（不要尝试设置列表中每一行的高度，否则使用dataview并在dataview upatedata事件上设置高度）
• 请记住，dataview要比list慢得多，而且在一个列表中，所有项目都应该具有相同的高度

最后但并非最不重要的一点是，您可以在列表配置中使用：

variableHeights: true

---

加载过程是异步的，您从加载中的回调不一定会影响列表

• 高度可以从list.element.html读取，您不需要计算高度，因为列表已经有一个列表
• Load已自动更新列表
• Sencha 2.2.1的列表组件是以不同的方式生成的。它只生成可见项目数加1，并切换listitems的位置
• 高度：'auto'最好替换为flex:1

我建议你

• 删除您的回拨
• 打电话给商店，看看商店里是否有商品
• 将listitem高度设置为固定值（不要尝试设置列表中每一行的高度，否则使用dataview并在dataview upatedata事件上设置高度）
• 请记住，dataview要比list慢得多，而且在一个列表中，所有项目都应该具有相同的高度

最后但并非最不重要的一点是，您可以在列表配置中使用：

variableHeights: true

---

您的

字段集的容器是什么？如果您将该容器的布局也设置为“适合”

，则列表应能独立工作。我尝试过这样做，不幸的是，出于某种原因，页面上的按钮会展开以适合整个页面，并且字段集根本不显示。您的意思是列表由于其高度而完全不可见吗？或者是您试图实现的其他目标？@InfinityLop，如果是这种情况，则使用

布局：{type:'vbox'，align:'stretch'}

并在您的字段集上使用

flex:1

。您的

字段集的容器是什么？如果您将该容器的布局也设置为“适合”

，则列表应能自行工作。我尝试过这样做，不幸的是，出于某种原因，页面上的按钮会展开以适合整个页面，而字段集不会显示