如何在extjs中正確設置按鈕的圖標大小？

我正在使用extjs4和我試圖做的似乎很簡單，但我找不到它的工作解決方案。如何在extjs中正確設置按鈕的圖標大小？

我有一個64 * 64像素的圖標，我想我的按鈕，將其顯示爲背景圖像，但ExtJS的只顯示在網絡上的圖像部分 .Googled一個解決方案，但沒有人提出了一個工作它的解決方案。我只是想讓我的背景圖像適合我的按鈕。

這裏是我的js代碼：

{ 
    xtype : 'button', 
    text : null, 
    iconCls : 'startbutton', 
    //icon:'./assets/icons/startbtn.png', 
    //style:{height:'60px'}, 
    width : 64, 
    height : 64 
}

這裏是我的CSS代碼：

.x-btn-icon .startbutton { 
    background-image: url(start.png) !important; 
}

我嘗試了一些CSS組合仍然沒有成功。

來源

2011-09-30 Mehdi Fanai

的iconCls嚴格指的是按鈕的圖標，如果你想覆蓋整個按鈕的圖片，你應該後臺添加一個CSS類添加到按鈕。

{ 
    xtype: 'button', 
    width: 64, 
    height: 64, 
    text: 'some text', 
    cls: 'startbutton' 
}

和CSS

.startbutton { 
    background-image: url(start.png) !important; 
}

來源

2011-09-30 12:28:33 nscrob

謝謝nscrob.its工作。 –

雖然這不會直接幫助，如果你是圖像64PX高/寬，下面的配置「縮放」選項可以用來調節按鈕的大小：

•「小」 - 結果在16px高的按鈕元素中。

•'medium' - 結果按鈕元素高24px。

•「大」 - 在按鈕元素結果是32PX高

來源

2011-09-30 11:53:07 dougajmcdonald

我已經做了whay你的建議，但它顯示的圖標，而不是所有的它的一半。 –

我雖然暗示！ – dougajmcdonald

我使用ExtJS的3.4.0，我不知道這是在任何4.x版更容易，但我希望如此！

我已經解決了，除了創建小/中/大，然後單擊按鈕specifing新的按鈕樣式問題：

{ text: 'Read Data', 
    scale: 'extra', 
    iconAlign: 'left', 
    iconCls:'read_icon'}

CSS代碼必須爲每個邊指定你要使用的圖標，在我剛剛爲左側定義了我的情況，但是您必須克隆每一側的頂部/底部/右側/左側。你可以找到EXT-all.css裏面所有的原代碼，以下是我正在使用的是什麼一個64×64的圖標

.x-btn-text-icon .x-btn-icon-extra-left .x-btn-text{ 
    background-position: 0 center; 
    background-repeat: no-repeat; 
    padding-left:66px; 
    height:64px; 
}

中可以重新使用的代碼的所有「extra'大小的按鈕，你的項目，你可以添加儘可能多的

來源

2012-09-13 10:03:25 colthreepv

你是我見過的最好的答案。是否有一種方法可以爲整個''按鈕'做'scale'屬性？ – Thomas

對不起@Thomas，這是很久以前的...我沒有使用過Ext，因爲:(現在還沒有線索 – colthreepv

不是問題！這是在黑暗中拍攝的，我會留下評論，儘管，如果有人看到它，並認爲，「哦，我知道」 – Thomas

我有一個接受的答案重要的問題。按鈕文本（下圖中的左鍵）出現在錯誤的位置（圖標後面） - 它被配置爲使用默認比例的位置。

enter image description here

爲了使用其它超缺省圖標大小並放置在正確的位置的文字，我的解決方法是相當簡單的，沒有壓倒一切核心樣式。

我剛剛更換了text屬性與html財產。然後，我在「範圍」內放置了所需的按鈕文本，並向該範圍添加了一個類，以便使用CSS正確定位它。

這是代碼（上IE，火狐測試，鉻）：

按鈕定義

xtype:'button', 
iconCls:'contactIcon80', 
iconAlign:'top', 
width:120, 
height:100, 
html:'<span class="bigBtn">Damn you hayate</span>'

按鈕iconCls

.contactIcon80 { 
    background-image: url(../images/calendar80.png) !important; 
    width:80px!important; 
    height:80px!important; 
    margin-right: auto !important; 
    margin-left: auto !important; 
}

跨度類

.bigBtn { 
    position: absolute; 
    bottom: 4px !important; 
    left: 0% !important; 
    text-align: center !important; 
    width: 120px !important; 
}

中課程這是圖標頂部文本底部。您可以自定義爲其他佈局

來源

2012-11-09 00:47:48

如何在extjs中正確設置按鈕的圖標大小？

回答

相關問題