Неправильные кнопки с SproutCore

Question

На этой неделе я начал изучать SproutCore. Мне очень нравятся рамки, но ненавижу отсутствие учебного материала. Пройдя большую часть руководств, я решил учиться, пытаясь что-то построить. Я написал небольшой GridView с кнопками в нем, но кнопки кажутся искаженными, под каждой кнопкой есть синие копии без меток и пара розовых линий. Что это? Почему это? Как мне от этого избавиться?

Соответствующий код:

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')
  })
})

А также:

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

Answer 1

Кнопки и многие другие стилизованные виджеты имеют определенную высоту, определяемую темой. Установите controlSize и высоту кнопки (rowHeight в GridView в вашем случае), чтобы соответствовать одному из следующих:

• SC.SMALL_CONTROL_SIZE: 18px
• SC.REGULAR_CONTROL_SIZE: 24px
• SC.HUGE_CONTROL_SIZE: 30 пикселей
• SC.JUMBO_CONTROL_SIZE: 44px

Например:

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
  })
})

Все изображения, используемые в теме, делятся на несколько основных файлов, а CSS используется для выбора того, какую часть мозаичного изображения отображать. То, что вы видите, это графическое "переполнение" и отображение частей изображений, предназначенных для других целей. Это имеет достаточный смысл?