SC.ScrollView around SC.StackedView

main_page.js

/*
This example shows how to use SC.StackedView with complex items. 
The item view (List.ItemView) must use SC.StaticLayout mixin and 
set useStaticLayout to YES -- that's a requirement of SC.StackedView.

Note that children views of List.ItemView also need to add SC.StaticLayout 
and set useStaticLayout to YES. This setting doesn't preclude positioning 
of child views within its block, by using layout's "left", "width"
*/

List.ItemView = SC.View.extend(SC.StaticLayout, {
	useStaticLayout: YES,
	childViews: [
 	    SC.LabelView.design(SC.StaticLayout, {
 	    	useStaticLayout: YES,
	    	value: 'first label',
	    	layout: {left: 10, width: 150}
	    }),
 	    SC.ButtonView.design(SC.StaticLayout, {
 	    	useStaticLayout: YES,
	    	title: 'second button',
	    	layout: {left: 50, width: 150}
	    }),
	    SC.StaticContentView.design({
	    	contentBinding: '.parentView.content'
	    })
	]
});

List.ContentView = SC.StackedView.extend({
	exampleView: List.ItemView,
	contentBinding: 'List.mainPage.mainPane.data'
});


List.mainPage = SC.Page.design({
  mainPane: SC.MainPane.design({
	    data: [],
	    childViews: 'contentView add'.w(),
	    
	    contentView: SC.ScrollView.design({
	    	layout: {top: 5, left: 5, width: 300, bottom: 5},
	    	contentView: List.ContentView.design({})
	    }),
    
		add: SC.ButtonView.design({
			layout: {top: 5, right: 5, width: 100, height: 44},
			title: 'add',
			action: function() { 
				var d = List.mainPage.mainPane.data;
				d.pushObject('some content on line ' + d.length);
			}
		})
  	})
});