ScrollView elements not adding

Hi,

I have developed native android and iphone apps in the past and am new to appcelerator. I am trying to create a view which has a scroll view the width of the device. The content of the scrollview (for the demo purposes) should be wider than the device. The height of the scroll view should be say 100 high. This in theory should force the user to scroll left and right in the appearance of a single "row" of elements.

Here's the code I have so far... it's not working - in that it's showing only a single icon (using a PDF image at the moment). I was expecting 6 pdf icons side by side which I can then scroll left and right to see.

(So the scrollview should be horizontally scrollable, not vertically).

function createDocumentElement(i) {
    var row = Ti.UI.createView({
        backgroundColor: 'red',
        borderColor: '#fff',
        borderWidth: 0,
        width:60, 
        height: 60,
        top: 0, 
        left: 0
    });
 
    var image = Ti.UI.createImageView({
      image:'/global/images/pdf.jpg',
      width: 50,
      height: 50
    });
    row.add(image);
 
    return row;
 
}
 
var scrollView = Ti.UI.createScrollView({
  scrollType: 'horizontal',
  contentHeight:160,
  contentWidth:'auto',
  showHorizontalScrollIndicator:true,
  width: 200
});
 
for(var i = 0; i <= 6; i++){
var row = createDocumentElement(i);
  scrollView.add(row);
}
 
win.add(scrollView);