Class: SC.ListView

Extends SC.CollectionRowDelegate, SC.CollectionView.

A list view renders vertical or horizontal lists of items. It is a specialized form of collection view that is simpler than a table view, but more refined than a generic collection.

You can use a list view just like any collection view, except that often you provide the rowSize, which will be either the height of each row when laying out rows vertically (the default) or the widht of each row when laying out the rows horizontally.

Variable Row Heights

Normally you set the row height or width through the rowSize property, but you can also support custom row sizes by assigning the customRowSizeIndexes property to an index set of all custom sized rows.

Using ListView with Very Large Data Sets

ListView implements incremental rendering, which means it will only render HTML for the items that are currently visible on the screen. This means you can use it to efficiently render lists with 100K+ items or more very efficiently.

If you need to work with very large lists of items however, be aware that calculating variable row sizes can become very expensive since the list view will essentially have to iterate over every item in the collection to determine each the total height or width.

Therefore, to work with very large lists, you should consider using a design that allows your row sizes to remain uniform. This will allow the list view to much more efficiently render content.

Alternatively, to support differently sized and incrementally rendered item views, you may want to consider overriding the offsetForRowAtContentIndex() and rowSizeForContentIndex() methods to perform some specialized faster calculations that do not require inspecting every item in the collection.

Note: row sizes and offsets are cached so once they are calculated the list view will be able to display very quickly.

Dragging and Dropping

When the list view is configured to accept drops onto its items, it will set the isDropTarget property on the target item accordingly. This allows you to modify the appearance of the drop target list item accordingly (@see SC.ListItemView#isDropTarget).

Defined in: list.js

Since:

SproutCore 1.0

Field Summary

Instance Methods

• computeLayout()
• contentIndexesInRect(rect)
• hideInsertionPoint()
• insertionIndexForLocation(loc, dropOperation)
• layout(key, value)
• layoutForContentIndex(contentIndex)
• rowHeightDidChangeForIndexes(indexes) Deprecated
• rowOffsetForContentIndex(idx)
• rowSizeDidChangeForIndexes(indexes)
• rowSizeForContentIndex(idx)
• showInsertionPoint(itemView, dropOperation)