Malformed buttons with SproutCore

Question

This week I started learning SproutCore. I quite like the framework, but hate the absence of learning material. After going through most of the guides I decided to learn by trying to build something. I wrote a little GridView with buttons in it, but the buttons seem to be distorted, there are labelless blue copies under each button, and a couple of pink lines. What is this? Why is this? How do I get rid of it?

Relevant code:

buttons: SC.GridView.design({
  layout: { centerX: 0, top: 40, width: 300, height: 120 },
  columnWidth: 120,
  rowHeight: 58,
  contentBinding: SC.Binding.oneWay('Calculator.buttons'),
  exampleView: SC.ButtonView.extend({
    titleBinding: SC.Binding.oneWay('.content')
  })
})

And:

Calculator.buttons = '1 2 3 4 5 6 7 8 9 0 + - / x ='.w()

Answer 1

Buttons and many of the other styled widgets have specific heights defined by the theme. Set controlSize and the height of the button (rowHeight in the GridView in your case) to match one of the following:

• SC.SMALL_CONTROL_SIZE: 18px
• SC.REGULAR_CONTROL_SIZE: 24px
• SC.HUGE_CONTROL_SIZE: 30px
• SC.JUMBO_CONTROL_SIZE: 44px

For example:

buttons: SC.GridView.design({
  layout: { centerX: 0, top: 40, width: 300, height: 120 },
  columnWidth: 120,
  rowHeight: 44,
  contentBinding: SC.Binding.oneWay('Calculator.buttons'),
  exampleView: SC.ButtonView.extend({
    titleBinding: SC.Binding.oneWay('.content'),
    controlSize: SC.JUMBO_CONTROL_SIZE
  })
})

All of the images used in the theme are sprited into just a few master files, and CSS is used to choose which part of the tiled image to display. What you are seeing is the graphic "overflowing" and displaying parts of images intended for other uses. Does that make enough sense?