如何在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中正确设置按钮的图标大小？

回答

相关问题