Infinite ListView bound with collection - bad adding behavior

Hi,

I am making infinite list view bound with data collection. I created ListView with ItemTemplate and ListSection. When I trigger init event on that list the first initialization is done and reset() method is called on my collection - the data will show properly in list. When I fire event next on my ListView and trying handle adding data to collection (using add() method) the ListView is not updated properly. Here is my code:

list.xml

<ListView id="offerList">
    <Templates>
        <ItemTemplate name="default" height="60">
            <Label bindId="title" class="title" />
        </ItemTemplate>
    </Templates>
 
    <ListSection id="offerListSection" dataCollection="Offer">
        <ListItem template="default" title:text="{title}">
    </ListSection>
 
</ListView>

list.js

(function() {
 
    var catalog = Alloy.Collections.Offer;
 
    /**
     * Get static models for collection
     */
    function getModels() {
 
        var pool = [{
            title : 'Brown desk',
        }, {
            title : 'Red flower',
        }, {
            title : 'Blue sky',
        }];
 
        var models = [];
 
        for (var i = catalog.length, j = (i + 18); i < j; i++) {
 
            var item = pool[i % 3];
 
            models.push({
                title : item.title + ' #' + i,
            });
        };
 
        return models;
    }
 
    /**
     * Loads next content
     */
    function doNext() {
        catalog.add(getModels());
    }
 
    /**
     * Init list and reset data collection
     */
    function doInit() {
        catalog.reset(getModels());
    }
 
    /**
     * Inits all list events
     */
    function initList() {
 
        $.offerList.addEventListener('init', doInit);
        $.offerList.addEventListener('next', doNext);
    }
 
    ...
})();

Model Offer is standard model generated by Studio with one column "title" and no special functions:

exports.definition = {
    config : {
        columns : {
            "title" : "string",
        },
        adapter : {
            type : "sql",
            collection_name : "offer"
        }
    },
    extendModel : function(Model) {
        _.extend(Model.prototype, {
            // extended functions and properties go here
        });
 
        return Model;
    },
    extendCollection : function(Collection) {
        _.extend(Collection.prototype, {
            // extended functions and properties go here
        });
 
        return Collection;
    }
};

This is what I get after first initialization (items are showed properly):

1. First initialization (list top)
2. First initialization (list bottom)

This is what I get after I tap to load more content (strange spaces are shown on top and bottom and also previous items disappeared):

1. After load next (list top)
2. After load next (list bottom)

If I tried to debug the behavior in studio I found out that all models had been added to collection but ListView not showed them properly.

Using: Studio 3.2.0, Alloy 1.3.0, iOs 7

I really don't know why ListView has problem with adding new models. Please anyone can help?