Basic SproutCore Form

basic_form.js

myForm: SC.View.extend({
  childViews: ['nameLabel', 'givenNameField', 'familyNameField', 'imageField', 'phoneLabel', 'phoneField', // ... etc. ],
  
  // To save us the trouble of offsetting each view independently, we use a child layout plugin that stacks them vertically.
  childViewLayout: SC.View.VERTICAL_STACK,
  childViewLayoutOptions: { paddingBefore: 35, paddingAfter: 35, spacing: 14 },

  nameLabel: SC.LabelView.extend({
    classNames: ['form-label'],
    layout: { left: 20, height: 20 },
    value: "_ContactFormContactLabel"
  }),

  givenNameField: SC.TextFieldView.extend({
    classNames: ['form-field'],
    hint: "_GivenNameHint",
    layout: { borderBottom: 1, height: 30, left: 20 },
    valueBinding: 'SL.editObjectController.givenName',
  }),

  familyNameField: SC.TextFieldView.extend({
    classNames: ['form-field'],
    hint: "_FamilyNameHint",
    layout: { borderBottom: 1, height: 30, left: 20 },
    valueBinding: 'SL.editObjectController.familyName'
  }),

  phoneLabel: SC.LabelView.extend({
    classNames: ['form-label'],
    layout: { left: 20, height: 20 },
    marginBefore: 50, // Instruct the child layout plugin to leave 50px margin before this view.
    value: "_PhoneLabel"
  }),
  
  // etc.