prob.js

// The menu:
    menu: SC.SourceListView.design({
      layout: { top: 0, left:0, bottom: 0, width: 250 },
      contentValueKey: 'displayName',
      contentBinding: 'Settings.menuItemsController.arrangedObjects',
      selectionBinding: 'Settings.menuItemsController.selection',
      localize: YES,
      rowHeight: 24,
      hasContentIcon: YES,
      contentIconKey: 'icon',
      exampleView: Settings.MenuItemView,
      isEditable: NO,
      canEditContent: NO,
      canReorderContent: NO,
      canDeleteContent: NO,
      destroyOnRemoval: YES
    }),



// Menu items controller:

Settings.menuItemsController = SC.TreeController.create(
/** @scope Settings.menuItems.prototype */ {
  contentBinding: 'Settings.settingsController.menuItems',
  allowsEmptySelection: YES,
  treeItemIsGrouped: YES

}) ;




// Settings controller:

Settings.settingsController = SC.ObjectController.create(
/** @scope Settings.settingsController.prototype */ {

  menuItems: []

}) ;




// Main:
Settings.main = function main() {
  var menuItems = [], generalMenuItems = [];

  // Step 1: Instantiate Your Views
  // The default code here will make the mainPane for your application visible
  // on screen.  If you app gets any level of complexity, you will probably 
  // create multiple pages and panes.  
  Settings.getPath('mainPage.mainPane').append() ;

  generalMenuItems.push(SC.Object.create({ displayName: "_General".loc() }));
  generalMenuItems.push(SC.Object.create({ displayName: "_Bank".loc() }));
  generalMenuItems.push(SC.Object.create({ displayName: "_Lyoness".loc() }));

  menuItems.push(SC.Object.create({ displayName: "_General".loc(), treeItemChildren: generalMenuItems, treeItemIsExpanded: YES }));

  Settings.settingsController.set('menuItems', menuItems);

} ;