gistfile1.js

  centerEdit: SC.View.design({
    layout: { top: 0, left: 0, right: 0, bottom: 0 },
    childViews: 'editToolbar editFooter editMiddle'.w(),
    
    editToolbar: SC.View.design({
      layout: { top: 0, left: 0, right: 0, height: 36 },
      classNames: ['bb-toolbar'],
      childViews: 'addProperty addRelation'.w(),
      
      addProperty: SC.ButtonView.design({
        layout: { centerY: 1, height: 24, left: 24, width: 160 },
        title:  "Neue Eigenschaft",
        target: "BB",        
        action: "addProperty"
      }),
      
      addRelation: SC.ButtonView.design({
        layout: { centerY: 1, height: 24, right: 24, width: 160 },
        title:  "Neue Verknüpfung",
        target: "BB",        
        action: "addRelation"
      })
    }),
    
    editFooter: SC.View.design({
      layout: { bottom: 0, left: 0, right: 0, height: 36 },
      classNames: ['bb-toolbar'],
      childViews: 'cancel save'.w(),
      
      cancel: SC.ButtonView.design({
        layout: { centerY: 1, height: 24, left: 24, width: 160 },
        title:  "Abbrechen",
        target: "BB",        
        action: "cancel"
      }),
      
      save: SC.ButtonView.design({
        layout: { centerY: 1, height: 24, left: 194, width: 160 },
        title:  "Speichern",
        target: "BB",        
        action: "save"
      })
    }),
    
    editMiddle: SC.View.design({
      layout: { top: 36, left: 0, right: 0, bottom: 36 },
      childViews: ['scrollView'],
      scrollView: SC.ScrollView.design({

        hasHorizontalScroller: NO,
        borderStyle: SC.BORDER_GRAY,

        contentView: SC.ListView.design({
          listItemActionProperty: 'actionClassName',
          contentValueKey: "value",
          canEditContent: YES,
          exampleView: SC.ListItemView.extend({
            renderLabel: function(context, label) {
              var title   = this.getPath('content.title');
              var value   = this.getPath('content.value');
              var isChild = this.getPath('content.isChild');

              if (!SC.none(title)) context.push('<label>', title, ':</label>')
              if (!SC.none(value)){
                if (isChild) context.push('<span class="bb-list-child">', value, '</span>');
                else context.push('<span>', value, '</span>');
              } 

            },
            $label: function() {
              return this.$('span') ;
            },
            renderAction: function(context, actionClassName){
              context.push('<img src="',
                SC.BLANK_IMAGE_URL,
                '" class="action sc-mini-icon ',
                actionClassName,
                '" />');
            },
            mouseDown: function(evt) {
              // if inside action icon
              if (this._isInsideElementWithClassName('action', evt)) {
                content = this.get('content') ;
                if (content && content.performAction) {
                  content.performAction(this);
                }
                return NO; // should not be called on mouseUp
              }
              return sc_super();
            }
          }),
          contentValueKey: 'value',
          contentBinding: 'BB.unitDetailsController.arrangedObjects',
          selectionBinding: 'BB.unitDetailsController.selection',
          rowHeight: 21
        })
      })
    }),