List items are not shown because of undefined height

Question

I have a list item that is populated by a store. Once the store loads, the list does not seem to resize with the proper height. The height is in fact zero. Do you guys have any recommendations on having the list re-calculate its height after loading the store?

My view:

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

I realize the itemTpl shouldn't have tables in it, but let's ignore that for now.

Here's how I'm currently forcing it to work. I push the height from the controller store load callback.

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

Not very elegant, because I'm just jamming in a set height.

So the question is, how do I force the list to redraw its height after getting the records back from the store?

Answer 1

The loading process is async and your callback from the load does not neccessarily affect the list.

• Height can be read from the list.element.html and you do not need to calculate the height, as the list already has a list.
• Load already updates the the list automatically.
• The list component of Sencha 2.2.1 is generated in a different way. It only generates the number of visible items plus 1 and switches location of the listitems
• height:'auto' would be best replaced with flex: 1

I would recommend, that you

• delete your callback
• call the store to see if there are items in the store
• set the listitem height to a fix value (do not try to set the height of each row in the list, otherwise use dataview and set the height on dataview upatedata event)
• remember that dataview is way slower than list and that on a list all items are meant to have the same height

And last but not least you can use on the list config:

variableHeights: true