Question

我有一个由商店填充的列表项。一旦商店加载，列表似乎没有调整适当的高度。高度实际上为零。你们有没有建议在装载商店后重新计算它的高度？

我的观点：

            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
    });

不是很优雅，因为我只是在设定的高度干扰。

所以问题是，在从商店取回记录后，如何强制列表重绘其高度？

Answer 1

加载过程是异步的，来自加载的回调不会影响列表。

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

我建议你，

删除你的回调
致电商店以查看商店中是否有商品
将listitem高度设置为固定值（不要尝试设置列表中每行的高度，否则使用dataview并在dataview upatedata事件上设置高度）
请记住，dataview比列表慢，而且在列表中所有项目都具有相同的高度

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

variableHeights: true

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

1 个答案: