SproutCore的畸形按鈕

本週我開始學習SproutCore。我很喜歡這個框架，但是討厭缺乏學習材料。在閱讀大部分指南後，我決定通過嘗試構建一些東西來學習。我寫了一個帶有按鈕的小型GridView，但按鈕似乎被扭曲，每個按鈕下面都有無標籤的藍色副本，還有一些粉紅色的線條。這是什麼？爲什麼是這樣？我如何擺脫它？SproutCore的畸形按鈕

相關代碼：

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

來源

2013-05-27 11684

按鈕和許多其他風格的小部件具有由主題定義的特定高度。設置controlSize和按鈕的高度（rowHeight的在GridView你的情況）符合以下條件之一：

SC.SMALL_CONTROL_SIZE：18像素
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用於選擇要顯示的平鋪圖像的哪一部分。你看到的是圖形「溢出」，並顯示用於其他用途的圖像部分。這是否有足夠的意義？

來源

2013-05-27 16:26:46

太棒了！我現在不在我的桌面上，所以我現在不能測試它，但它是有道理的。 – 11684

約翰好解釋。附錄：粉紅色線條是一種開發者模式的東西，當精靈不適合正確使用時，它會使它變得非常明顯。粉色在製作時會變成透明的，但當然目標是讓精靈和div匹配到那時！ – Dave

@Dave謝謝！對於你和John Laxson：你似乎對SproutCore有相當多的瞭解。你從哪裏學到的？我甚至找不到完整的遠程教程。 – 11684

SproutCore的畸形按鈕

回答

相關問題