Javascript 带SproutCore的格式错误的按钮

这周我开始学习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')
  })
})

以及：

---

按钮和许多其他样式的小部件具有由主题定义的特定高度。设置controlSize和按钮的高度（在您的案例中为GridView中的rowHeight）以匹配以下选项之一：

• SC.SMALL\u CONTROL\u SIZE

  ：18px

• SC.REGULAR\u CONTROL\u SIZE

  ：24px

• SC.ground\u CONTROL\u SIZE

  ：30px

• SC.JUMBO\u控制大小

  ：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用于选择要显示的平铺图像的哪一部分。您看到的是图形“溢出”，并显示用于其他用途的部分图像。这有足够的意义吗？

按钮和许多其他样式的小部件都有由主题定义的特定高度。设置controlSize和按钮的高度（在您的案例中为GridView中的rowHeight）以匹配以下选项之一：

• SC.SMALL\u CONTROL\u SIZE

  ：18px

• SC.REGULAR\u CONTROL\u SIZE

  ：24px

• SC.ground\u CONTROL\u SIZE

  ：30px

• SC.JUMBO\u控制大小

  ：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用于选择要显示的平铺图像的哪一部分。您看到的是图形“溢出”，并显示用于其他用途的部分图像。这有意义吗？

太棒了！我现在不在我的桌面上，所以我现在不能测试它，但这是有意义的。约翰，很好的解释。附录：粉色线条是开发人员模式的东西，目的是在精灵无法正确安装时让它变得非常明显。当你为制作而构建时，粉色变成透明，当然目标是让精灵和div在那时匹配起来@戴夫，谢谢！对你和约翰·拉克松来说：你似乎对SproutCore很了解。你从哪里学来的？我甚至找不到一个远程完整的教程。@11684一些核心团队目前正在花费大量精力来改进指南，但很多SproutCore目前都是黑魔法。你只要不断地敲打它，你就会开始学习mojo（irc频道是一个很好的资源），但是学习曲线不是很浅。我刚刚检查了源代码，发现了另外两种尺寸：

SC.LARGE\u CONTROL\u SIZE

和

SC.TINY\u CONTROL\u SIZE

。我在哪里可以找到相应的高度？太棒了！我现在不在我的桌面上，所以我现在不能测试它，但这是有意义的。约翰，很好的解释。附录：粉色线条是开发人员模式的东西，目的是在精灵无法正确安装时让它变得非常明显。当你为制作而构建时，粉色变成透明，当然目标是让精灵和div在那时匹配起来@戴夫，谢谢！对你和约翰·拉克松来说：你似乎对SproutCore很了解。你从哪里学来的？我甚至找不到一个远程完整的教程。@11684一些核心团队目前正在花费大量精力来改进指南，但很多SproutCore目前都是黑魔法。你只要不断地敲打它，你就会开始学习mojo（irc频道是一个很好的资源），但是学习曲线不是很浅。我刚刚检查了源代码，发现了另外两种尺寸：

SC.LARGE\u CONTROL\u SIZE

和

SC.TINY\u CONTROL\u SIZE

。我在哪里可以找到相应的高度？