SproutCore的按钮格式错误 [英] Malformed buttons with SproutCore

问题描述

这周，我开始学习SproutCore.我非常喜欢该框架，但讨厌缺少学习材料.在阅读了大多数指南之后，我决定尝试构建一些东西以进行学习.我写了一个带有按钮的GridView，但是按钮似乎失真了，每个按钮下面都有无标签的蓝色副本，以及几条粉红色的线条.这是什么?为什么是这样?我如何摆脱它?

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?

相关代码:

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

推荐答案

按钮和许多其他样式的窗口小部件具有由主题定义的特定高度.设置controlSize和按钮的高度(在您的情况下为GridView中的rowHeight)以匹配以下其中一项:

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:18像素
• SC.REGULAR_CONTROL_SIZE:24像素
• SC.HUGE_CONTROL_SIZE:30像素
• SC.JUMBO_CONTROL_SIZE:44像素

• SC.SMALL_CONTROL_SIZE: 18px
• SC.REGULAR_CONTROL_SIZE: 24px
• SC.HUGE_CONTROL_SIZE: 30px
• 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用于选择要显示平铺图像的哪一部分.您所看到的是图形溢出"并显示打算用于其他用途的图像部分.这样有意义吗?

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?

这篇关于SproutCore的按钮格式错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！