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

我正在使用extjs4，我尝试做的似乎很简单，但我找不到一个有效的解决方案

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

以下是我的js代码：

{
xtype:'按钮'，
文本：空，
iconCls:“开始按钮”，
//图标：'./assets/icons/startbtn.png'，
//样式：{高度：'60px'}，
宽度：64，
身高：64
}

以下是我的css代码：

.x-btn-icon.startbutton{
背景图片：url（start.png）！重要；
}

---

我尝试了一些css组合，但仍然没有成功。

虽然如果您的图像是64px高/宽，这不会直接有帮助，但以下配置“缩放”选项可用于调整按钮的大小：

•“小”-导致按钮元件为16px高

•“中等”-导致按钮元件为24px高

---

•“大”-导致按钮元素为32px高

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

{
xtype:'按钮'，
宽度：64，
身高：64，
文本：“一些文本”，
cls:“开始按钮”
}

还有css

.startbutton{
背景图片：url（start.png）！重要；
}

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

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

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

CSS代码必须为要使用图标的每一侧指定，在我的例子中，我刚刚为左侧定义了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;
}

---

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

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

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

我刚刚用

html

属性替换了

text

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

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

按钮定义

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

跨级

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

当然，这是图标顶部文本底部。

---

你可以为其他版面定制它

我已经按照你的建议做了，但是它显示了图标的一半，而不是全部。你的答案是我迄今为止看到的最好的答案。是否有一种方法可以将

按钮

作为一个整体执行此

缩放

属性？对不起@Thomas，这是很久以前的事了。。。从那以后我就没用过Ext:（现在没有线索没问题！这是一次暗中拍摄。不过，我会保留评论，以防有人看到它并想，“哦，我知道”

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