Malformed buttons with SproutCore

拈花ヽ惹草 提交于 2019-12-13 02:27:21

问题


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

回答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?



来源:https://stackoverflow.com/questions/16776835/malformed-buttons-with-sproutcore

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!