Sencha Touch grid crashes, console output: <error>

[drinovc]

Touch version tested:

• Touch 2.3.0

Browser versions or Packager version tested against:

• Chrome

Device and OS tested against:

• Windows 8.1

What theme are you using for your application:

• Mountain View

Description:

• I am experiencing some weird bug in sencha touch grid. I am filtering store which is used by grid and also scrolling grid scroller to top. I am doing this after button press on one view, so grid is not visible at the moment (There is main container which holds multiple views (card layout)). When the view with grid is shown, grid crashes all that can be seen in console is: <error>. I looked at stack trace and it looks like it's looped. I am appending image. It't got to be something with grid not being visible when filtering. I was debuging and figure that Ext.define.refreshMaxPosition() is returning { x:0, y:0 }. I need additional pair of eyes for debuging this.

Steps to reproduce the problem:

• THIS BUG IS VERY HARD TO REPRODUCE
• filter grid when grid not visible
• show view with grid

The result that was expected:

• working grid
• scrollable
• records from store

The result that occurs instead:

• grid is not respodning
• not scrolling
• there are wrong records or there are missing records
• <error> in Chrome console

Capture.PNG

[mitchellsimoens]

Can I get a test case?

[drinovc]

Can I get a test case?

I will make one when I will find the time. It occurs in two of our projects, but not all the time.

[drinovc]

We found the problem. It is a bug. Please fix this in next version of touch. This bug also appears in infinite list but it does not crash. But the grid does. The fix:

Ext.define("App.override.dataview.List", {
    override: "Ext.dataview.List",
    
    handleItemHeights: function() {
        var me = this,
            updatedItems = me.updatedItems,
            ln = updatedItems.length,
            itemMap = me.getItemMap(),
            useSimpleItems = me.getUseSimpleItems(),
            minimumHeight = itemMap.getMinimumHeight(),
            headerIndices = me.headerIndices,
            headerMap = me.headerMap,
            variableHeights = me.getVariableHeights(),
            itemIndex, i, j, jln, item, height, scrollDockHeight;


        for (i = 0; i < ln; i++) {
            item = updatedItems[i];
            itemIndex = item.$dataIndex;


            // itemIndex may not be set yet if the store is still being loaded
            if (itemIndex !== null && itemIndex < itemMap.map.length) {   //////// <----  do not recalculate not visible items since this adds them to changed indices list
                if (variableHeights) {
                    height = useSimpleItems ? item.element.getHeight() : item.element.getFirstChild().getHeight();
                    height = Math.max(height, minimumHeight);
                } else {
                    height = minimumHeight;
                }


                item.$ownItemHeight = height;


                jln = me.scrollDockItems.top.length;
                if (item.isFirst) {
                    me.totalScrollDockTopHeight = 0;
                    for (j = 0; j < jln; j++) {
                        scrollDockHeight = me.scrollDockItems.top[j].$scrollDockHeight;
                        height += scrollDockHeight;
                        me.totalScrollDockTopHeight += scrollDockHeight;
                    }
                }


                jln = me.scrollDockItems.bottom.length;
                if (item.isLast) {
                    for (j = 0; j < jln; j++) {
                        scrollDockHeight = me.scrollDockItems.bottom[j].$scrollDockHeight;
                        height += scrollDockHeight;
                    }
                }


                if (headerIndices && headerIndices[itemIndex]) {
                    height += me.headerHeight;
                }


                itemMap.setItemHeight(itemIndex, height);
                item.$height = height;
            }
        }


        itemMap.update();
        height = itemMap.getTotalHeight();


        headerMap.length = 0;
        for (i in headerIndices) {
            if (headerIndices.hasOwnProperty(i)) {
                headerMap.push(itemMap.map[i]);
            }
        }


        me.setScrollerHeight(height);


        me.updatedItems.length = 0;
    }    
});


Ext.define("App.override.util.PositionMap", {
    override: "Ext.util.PositionMap",
    
    update: function() {
        var adjustments = this.adjustments,
            indices = adjustments.indices,
            heights = adjustments.heights,
            map = this.map,
            ln = indices.length,
            minimumHeight = this.getMinimumHeight(),
            difference = 0,
            i, j, height, index, nextIndex, currentHeight;


        if (!adjustments.indices.length) {
            return false;
        }


        Ext.Array.sort(indices, function(a, b) {
            return a - b;
        });


        for (i = 0; i < ln; i++) {
            index = indices[i];
            nextIndex = indices[i + 1] || map.length - 1;
            if (index < map.length && nextIndex < map.length) {   //////// <---- added if so it stops at map size
                currentHeight = (map[index + 1] !== undefined) ? (map[index + 1] - map[index] + difference) : minimumHeight;
                height = heights[index];
    
                difference += height - currentHeight;
    
                if (index < map.length-1)                         //////// <---- added if so it does not grow map, but still adds difference for last item
                    for (j = index + 1; j <= nextIndex; j++) {
                        map[j] += difference;
                    }
            }
        }


        this.offset += difference;
        this.adjustments = {
            indices: [],
            heights: {}
        };
        return true;
    }
});