gistfile1.js

Ups.mainPage = SC.Page.design({
    // The main pane is made visible on screen as soon as your app is loaded.
    // Add childViews to this pane for views to display immediately on page 
    // load.
    mainPane: SC.MainPane.design({
        childViews: 'middleView topView bottomView'.w(),

        topView: SC.ToolbarView.design({
          layout: { top: 0, left: 0, right: 0, height: 36 },
          childViews: 'labelView addButton'.w(),
          anchorLocation: SC.ANCHOR_TOP,
          
          labelView: SC.LabelView.design({
            layout: { centerY: 0, height: 24, left: 8, width: 300 },
            controlSize: SC.LARGE_CONTROL_SIZE,
            fontWeight: SC.BOLD_WEIGHT,
            value:   'My Wonderful App'
          }),
          
          addButton: SC.ButtonView.design({
            layout: { centerY: 0, height: 24, right: 8, width: 100 },
            title:  "+"
          })
        }),

        middleView: SC.ScrollView.design({
          
          hasHorizontalScroller: NO,
          
          layout: { top: 36, bottom: 32, left: 0, right: 0 },
          
          backgroundColor: 'white',
          
          
          
          contentView: SC.ListView.design({
              contentValueKey: 'title',
              contentBinding: 'Ups.planController.arrangedObjects',
              // selectionBinding: 'Ups.planController.selection',
              delegate: Ups.planController,
              canReorderContent: YES,
              canEditContent: YES,
              canDeleteContent: YES,
              contentCheckboxKey: "isDone"
          })
        }),

        bottomView: SC.ToolbarView.design({
          layout: { bottom: 0, left: 0, right: 0, height: 32 },
          anchorLocation: SC.ANCHOR_BOTTOM
        })
    })
});