SproutCore bindings

gistfile1.js

// group_view.js

TestUI.GroupView = SC.View.extend(
  childViews: 'headingView'.w(),
  backgroundColor: 'white',
  layout: { width: 640 },
  classNames: 'groupview'.w(),
  displayProperties: 'title'.w(),
  title: '',
  titleBinding: SC.Binding.from('.headingView.labelView.value'),

  headingView: SC.ToolbarView.extend({
    layout: { top: 0, left: 0, right: 0, height: 24 },
    childViews: 'labelView'.w(),

    labelView: SC.LabelView.extend({
      layout: { centerY: 0, height: 16, left: 8, width: 200 }
    })
  })
});

// main_page.js

// ...
  contentView: TestUI.GroupView.design({
    layout: { top: 36, left: 250, right: 0 },
    title: 'Blah'
  })
// ...