gistfile1.js

Nav.testArray = [];
Nav.TestItem = SC.StaticContentView.extend({});

Nav.mainPage = SC.Page.design({
	add: function() { 
              Nav.testArray.insertAt(Nav.testArray.length, 'some content some content some content some content some content some content');
        }
        childViews: [
             SC.ScrollView.design({
		layout: {top: 60, left: 10, width: 200, height: 300},
		hasHorizontalScroller: NO,
		contentView: SC.ListView.design({
			exampleView: Nav.TestItem,
			contentBinding: 'Nav.testArray',
			customRowHeightIndexes: null,
			contentIndexRowHeight: function(view, content, idx) {
			    return 60;
			},
			testArrayDidChange: function () {
  			    if( !this.get('customRowHeightIndexes') )
				this.set('customRowHeightIndexes', SC.IndexSet.create());
						
			    this.customRowHeightIndexes.add(0, Nav.testArray.length);
			}.observes('Nav.testArray.[]')
		})
	    }),
	    SC.ButtonView.design({
	        layout: {top: 10, left: 10, width: 200, height: 44},
		title: 'add',
		action: 'add',
		target: 'Nav.mainPage'
	    })]
});
              

This gist illustrates the simplest possible use of custom row height in a ListBox. In this case all rows are set to the same size of 60.

The ScrollView shows the list items, but the scrolling is badly mandled. Scrolling up and down shows incorrect offsets between items - showing big empty areas, overlapping items.