Custom ListView Row, can no longer select rows - sproutcore

Question

Here's my ScrollView:
middle: SC.ScrollView.design({
layout: { top: 36, bottom: 32, left: 0, right: 0 },
backgroundColor: '#ccc',
contentView: SC.ListView.design({
contentBinding: 'Spanish.wordsController.arrangedObjects',
selectionBinding: 'Spanish.wordsController.selection',
contentValueKey: "word",
contentDisplayProperties: 'word english'.w(),
selectOnMouseDown: YES,
exampleView: Spanish.CustomListItemView
})
})
and here is my custom listView row:
Spanish.CustomListItemView = SC.View.extend({
render: function(context, firstTime){
var content = this.get('content');
var word = content.get('word');
var english = content.get('english');
context = context.begin().push(' %# (%#)'.fmt(word,english)).end();
return sc_super();
}
});
The above works as expected, except that I can no longer select views. When I comment out "exampleView: Spanish.CustomListItemView" I can select rows, but they are no longer formatted properly. Why can I no longer select rows when I use exampleView?

Answer 1

Subclass SC.ListItemView instead.
Remove the return sc_super(); line.
Change the context = context.begin().push(' %# (%#)'.fmt(word,english)).end(); line to:
context.push(' %# (%#)'.fmt(word,english));
It should work now.

Answer 2

After getting help on IRC, I made the following changes which fixed the problem:
Spanish.CustomListItemView = SC.ListItemView.extend({
render: function(context, firstTime){
var content = this.get('content');
var word = content.get('word');
var english = content.get('english');
context.push(' %# (%#)'.fmt(word,english));
}
});
I was subclassing the wrong class (note the first line)