Question

  topLeftView: SC.ScrollView.design({
    backgroundColor: "#DADFE6",
    childViews: 'labLabel labMembersLabel'.w(),


    labLabel: SC.SourceListGroupView.design({
      layout:{top: 0, left: 0, width: 100, height: 100},
      value: "LABORATORY",
      fieldLabel: "LAB",
      backgroundColor: "white"

    }),

    labMembersLabel: SC.LabelView.design({
      layout: {top: 100, left: 0, width: 100, height: 100},
      value: "LAB MEMBERS"
    })
  }),

Neither labLabel our LabMembersLabel appears… What am I missing?

Answer 1

ScrollView is a special view, in that it does not use the childViews array, but instead expects to have a single view ‘contentView’ as you can see here:

https://github.com/sproutcore/sproutcore/blob/master/frameworks/desktop/views/scroll.js#L42

With this view, it will always monitor the height/width, and automatically, add scroll bars if the contentView gets too big. Scroll Views are usually used to hold listView’s which can get very long.

SC.ScrollView.design({
  contentView: SC.ListView.design({
    contentBinding: 'App.myContentArrayController'
  })
})

What you want todo is to is something like:

SC.ScrollView.design({
  contentView: SC.View.design({
    layout: {...},
    childViews: 'labLabel labMembersLabel'.w(),

    labLabel: SC.SourceListGroupView.design({ ... }),

    labMembersLabel: SC.LabelView.design({ ... })
  })
})

If the contentView is not a ListView (or another view that controls it’s own layout), it is important to provide a layout, otherwise the ScrollView will not be effective.

PS. As a side note, this is not how to use a SC.SourceListGroupView. These are only for use to set as an ‘exampleView’ on a SC.SourceListView.