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

发布于 2024-12-07 23:04:23 字数 652 浏览 0 评论 0原文

我正在使用 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 组合，但仍然没有成功。

原文

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.

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 working solution for it.I just want my background image fit to my button.

here is my js code:

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

here is my css code:

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

i tried some css combinations and still no success.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

心在旅行 2024-12-14 23:04:23

iconCls严格指的是按钮的图标，如果你想让图片覆盖整个按钮，你应该将背景添加到添加到按钮的css类中。

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

和CSS

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

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.

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

and the css

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

回复收藏 0 原文

生生漫 2024-12-14 23:04:23

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

在此处输入图像描述

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

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

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

按钮定义

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

Button iconCls

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

Span 类

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

当然这是针对图标顶部文本底部的。
您可以自定义其他布局

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.

enter image description here

In order to use an other-than-default icon size and place the text in the correct position, my solution was fairly simple, without overriding core styles.

I just replaced the text property with the html property.
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.

This is the code (tested on 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

.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

回复收藏 0 原文

风渺 2024-12-14 23:04:23

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

•“小”- 导致按钮元素高为 16 像素。

•'medium' - 按钮元素的高度为24 像素。

•'large' - 导致按钮元素高度为 32px

回复收藏 0 原文

喜你已久 2024-12-14 23:04:23

我正在使用 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;
}

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

I'm using ExtJS 3.4.0 and i don't know if this is any easier in 4.x but i hope so!

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

.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

回复收藏 0 原文

~没有更多了~