Javascript 如何在 extjs 中正确设置按钮的图标大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7609727/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to correctly set icon size of a button in extjs?
提问by Mehdi Fanai
I'm using extjs4 and What i'm trying to do seems to be simple but i can't find a working solution for it.
我正在使用 extjs4，我想要做的事情似乎很简单，但我找不到可行的解决方案。
I have a 64*64px icon and i want my button to show it as the background image but extjs only shows the image partially.Googled on the net for a solution but nobody suggested a workingsolution for it.I just want my background image fit to my button.
我有一个64 * 64像素的图标，我想我的按钮，将其显示为背景图像，但ExtJS的只显示图像部分的净.Googled一个解决方案，但没有人提出了一个工作解决方案，它。我只希望我的背景图片贴合到我的按钮。
here is my js code:
这是我的js代码：
{
xtype : 'button',
text : null,
iconCls : 'startbutton',
//icon:'./assets/icons/startbtn.png',
//style:{height:'60px'},
width : 64,
height : 64
}
here is my css code:
这是我的 css 代码：
.x-btn-icon .startbutton {
background-image: url(start.png) !important;
}
i tried some css combinations and still no success.
我尝试了一些 css 组合，但仍然没有成功。
采纳答案by nscrob
The iconCls refers strictly to the icon of the button, if you want the picture to cover the whole button you should add the background to a css class added to the button.
iconCls 严格指的是按钮的图标，如果你想让图片覆盖整个按钮，你应该将背景添加到添加到按钮的 css 类中。
{
xtype: 'button',
width: 64,
height: 64,
text: 'some text',
cls: 'startbutton'
}
and the css
和 CSS
.startbutton {
background-image: url(start.png) !important;
}
回答by Anestis Kivranoglou
I had an important issue with the accepted answer. The button text (left button in picture, below) appeared in the wrong position (behind the icon) - the position it was configured to be using the default scales.
我对接受的答案有一个重要的问题。按钮文本（下图中的左按钮）出现在错误的位置（图标后面） - 它被配置为使用默认比例的位置。
In order to use an other-than-default icon size and place the text in the correct position, my solution was fairly simple, withoutoverriding core styles.
为了使用非默认的图标大小并将文本放置在正确的位置，我的解决方案非常简单，没有覆盖核心样式。
I just replaced the textproperty with the htmlproperty.
Then, I placed the desired button text within a 'span' and added a class to this span in order to position it correctly with CSS.
我只是用text财产替换了html财产。然后，我将所需的按钮文本放置在“跨度”中，并向该跨度添加了一个类，以便使用 CSS 正确定位它。
This is the code (tested on IE , Firefox , Chrome):
这是代码（在 IE 、 Firefox 、 Chrome 上测试）：
Button definition
按钮定义
xtype:'button',
iconCls:'contactIcon80',
iconAlign:'top',
width:120,
height:100,
html:'<span class="bigBtn">Damn you hayate</span>'
Button iconCls
按钮图标Cls
.contactIcon80 {
background-image: url(../images/calendar80.png) !important;
width:80px!important;
height:80px!important;
margin-right: auto !important;
margin-left: auto !important;
}
Span class
跨度类
.bigBtn {
position: absolute;
bottom: 4px !important;
left: 0% !important;
text-align: center !important;
width: 120px !important;
}
Of course this is for icon top text bottom. You can customize it for other layouts
当然，这是针对图标顶部文本底部的。您可以为其他布局自定义它
回答by dougajmcdonald
Although this won't directly help if you're image is 64px high/wide, the following config 'scale' option can be used to adjust the size of a button:
尽管如果您的图像高/宽 64 像素，这不会直接提供帮助，但可以使用以下配置“缩放”选项来调整按钮的大小：
?'small' - Results in the button element being 16px high.
?'small' - 导致按钮元素高 16 像素。
?'medium' - Results in the button element being 24px high.
?'medium' - 导致按钮元素高 24 像素。
?'large' - Results in the button element being 32px high
?'large' - 导致按钮元素高 32px
回答by Valerio
I'm using ExtJS 3.4.0 and i don't know if this is any easier in 4.x but i hope so!
我正在使用 ExtJS 3.4.0，我不知道这在 4.x 中是否更容易，但我希望如此！
I have solved the issue creating new button styles besides small/medium/large, then on the button specifing:
我已经解决了创建除小/中/大之外的新按钮样式的问题，然后在按钮上指定：
{ text: 'Read Data',
scale: 'extra',
iconAlign: 'left',
iconCls:'read_icon'}
CSS code must be specified for each side you're gonna use the icon, in my case i've just defined for left side, but you have to clone for each side top/bottom/right/left. You can find all the original code inside ext-all.css, here's what i'm using for a 64x64 icon
必须为要使用图标的每一侧指定 CSS 代码，在我的情况下，我刚刚为左侧定义，但您必须为每一侧顶部/底部/右侧/左侧进行克隆。您可以在 ext-all.css 中找到所有原始代码，这是我用于 64x64 图标的内容
.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;
}
You can re-use the code for all the 'extra'-sized buttons in your project and you can add as many you want
您可以为项目中所有“额外”大小的按钮重复使用代码，并且可以添加任意数量的按钮
