main_page.js

Todos.mainPage = SC.Page.design({
  mainPane: SC.MainPane.design({
    childViews: 'topView middleView bottomView'.w(),

    topView: SC.ToolbarView.design({
      layout: {top: 0, left: 0, right: 0, height: 36 }, //ADDED THIS
      anchorLocation: SC.ANCHOR_TOP, //ADDED THIS
      childViews: 'addTaskButton'.w(),

      addTaskButton: SC.ButtonView.design({
        layout: { centerY: 0, height: 24, right: 12, width: 100}, //ADDED THIS
        title: 'Add Task', //ADDED THIS
        target: 'Todos.tasksController',
        action: 'addTask'
      })
    }),

    middleView: SC.ScrollView.design({
      hasHorizontalScroller: NO,
      layout: { top: 36, bottom: 32, left: 0, right: 0 },
      backgroundColor: 'white',
      childViews: 'contentView'.w(),

      contentView: SC.ListView.design({
        contentBinding: 'Todos.tasksController.arrangedObjects',
        contentValueKey: 'description',
        contentCheckboxKey: 'isDone'
      })
    }),

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

      summaryView: SC.LabelView.design({
        layout: { centerY: 0, height: 18, left: 20, right: 20 },
        textAlign: SC.ALIGN_CENTER,
        valueBinding: 'Todos.tasksController.countSummary'
      })
    })
  })
});