EccapCalc.mainPage.js

// Instead of this:
 
EccapCalc.mainPage = SC.Page.design({

   mainPane: SC.MainPane.design({
    childViews: 'description value'.w(),
 
    description: SC.ScrollView.design({
      contentView: SC.ListView.design({
        layout: { centerX: 0, centerY: 0, width: 250, height: 300 },
        textAlign: SC.ALIGN_CENTER,
        contentBinding: 'EccapCalc.assetsController.arrangedObjects',
        selectionBinding: 'EccapCalc.assetsController.selection',
        contentValueKey: 'description',
        isEditable: YES,
      }),
    }),
 
    value: SC.ScrollView.design({
      contentView: SC.ListView.design({
        layout: { centerX: 250, centerY: 0, width: 250, height: 300 },
        textAlign: SC.ALIGN_CENTER,
        contentBinding: 'EccapCalc.assetsController.arrangedObjects',
        selectionBinding: 'EccapCalc.assetsController.selection',
        contentValueKey: 'value',
        isEditable: YES,
      }),
    }),
  }),
});

failed_ledgerView.js

// I want something like this:
 
EccapCalc.mainPage = SC.Page.design({

   mainPane: SC.MainPane.design({
    childViews: 'assetsLedger expensesLedger initialCareCostsLedger recurringCareCostsLedger'.w(),

    assetsLedger: EccapCalc.Ledger({
      top: ...,
      left: ...,
      controller: 'EccapCalc.assetsController',
    }),

    expensesLedger: EccapCalc.Ledger({
      top: ...,
      left: ...,
      controller: 'EccapCalc.expensesController',
    }),

 ....

ledgerView.js

// And I can do it like this:

EccapCalc.LedgerView = function(x, y, arrayController) {
  var w = 250;  // width
  var h = 300;  // height

  return SC.View.extend(
    /** @scope EccapCalc.LedgerView.prototype */ {

    childViews: 'description value'.w(),

    description: SC.ScrollView.design({
      contentView: SC.ListView.design({
        layout: { left: x, top: y, width: w, height: h },
        textAlign: SC.ALIGN_CENTER,
        contentBinding: arrayController + '.arrangedObjects',
        selectionBinding: arrayController + '.selection',
        contentValueKey: 'description',
        isEditable: YES,
      }),
    }),

    value: SC.ScrollView.design({
      contentView: SC.ListView.design({
        layout: { left: w + x, top: y, width: w, height: h },
        textAlign: SC.ALIGN_CENTER,
        contentBinding: arrayController + '.arrangedObjects',
        selectionBinding: arrayController + '.selection',
        contentValueKey: 'value',
        isEditable: YES,
      }),
    }),
  });
}