如何在extjs中正确设置按钮的图标大小？

Question

我正在使用extjs4而我正在尝试做的似乎很简单，但我找不到适合它的解决方案。

我有一个64 * 64px的图标，我希望我的按钮将其显示为背景图像，但是extjs只显示图像 部分 。在网上搜索解决方案，但没有人建议 工作 解决方案。我只想让我的背景图像适合我的按钮。

这是我的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组合但仍然没有成功。

Answer 1

iconCls严格指向按钮的图标，如果您希望图片覆盖整个按钮，则应将背景添加到添加到按钮的css类中。

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

和css

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

Answer 2

我对接受的答案有一个重要的问题。 按钮文本（下图中的左侧按钮）出现在错误的位置（图标后面） - 它被配置为使用默认比例的位置。

为了使用非默认图标大小并将文本放在正确的位置，我的解决方案非常简单，没有覆盖核心样式。

我刚用text属性替换了html属性。 然后，我将所需的按钮文本放在“span”中，并在此跨度中添加了一个类，以便使用CSS正确定位它。

这是代码（在IE，Firefox，Chrome上测试）：

按钮定义

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;
}

当然这是图标顶部文字底部。 您可以为其他布局自定义

Answer 3

虽然如果你的图像是64px高/宽，这不会直接帮助，但是下面的配置'scale'选项可以用来调整按钮的大小：

•'small' - 按钮元素的结果为16px高。

•'medium' - 按钮元素的结果为24px高。

•'large' - 按钮元素的结果为32px高

Answer 4

我正在使用ExtJS 3.4.0，我不知道4.x中这是否更容易，但我希望如此！

我已经解决了除了小/中/大之外创建新按钮样式的问题，然后在按钮上指定：

{ text: 'Read Data',
  scale: 'extra',
  iconAlign: 'left',
  iconCls:'read_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;
}

您可以重复使用项目中所有“额外”大小按钮的代码，并且可以添加任意数量的按钮