工具栏外观中的 extjs 按钮答案

【问题标题】：extjs buttons in toolbar appearance工具栏外观中的 extjs 按钮
【发布时间】：2010-10-13 13:11:57
【问题描述】：

嘿，我真的有一个小问题，但我似乎无法找到。

当我在 extjs 工具栏中放置一个按钮时，它会以默认外观出现（就像任何 Windows 工具栏选项一样）

如何让它看起来像表单中的按钮？？

【问题讨论】：

【解决方案1】：

试试这样：

tbar: [
  { xtype: 'button', text: 'Button 1', cls:'x-btn-default-small' }
]

【讨论】：

【解决方案2】：

你必须把它包装在一个面板中，这里是 Extjs 4.2.5 的解决方案

{
    xtype: 'panel',
    items: {
        xtype: 'button',
        text : 'My button'
    }
}

【讨论】：

【解决方案3】：

在 Sencha 论坛上查看此帖子Toolbar Button Style. 我也发现这种按钮样式作为文本对于用户来说非常不直观。只需将几行 CSS 添加到您的 ExtJs css 主文件中，您就可以为您的应用程序全局更改此外观。

【讨论】：

【解决方案4】：

这是我的解决方案（适用于 extJs 3.3.3）：

对于按钮添加额外的类，我将其命名为'x-toolbar-grey-btn'：

xtype: 'button',
id: 'processButton',
text: 'Process',
ctCls: 'x-toolbar-grey-btn'

额外类的样式，在单独的 CSS 文件中：

.x-toolbar-grey-btn .x-btn-tl{
    background-position: 0 0;
}
.x-toolbar-grey-btn .x-btn-tr{
    background-position: -3px 0;
}
.x-toolbar-grey-btn .x-btn-tc{
    background-position: 0 -6px;
}
.x-toolbar-grey-btn .x-btn-ml{
    background-position: 0 -24px;
}
.x-toolbar-grey-btn .x-btn-mr{
    background-position: -3px -24px;
}
.x-toolbar-grey-btn .x-btn-mc{
    background-position: 0 -1096px;
}
.x-toolbar-grey-btn .x-btn-bl{
    background-position: 0 -3px;
}
.x-toolbar-grey-btn .x-btn-br{
    background-position: -3px -3px;
}
.x-toolbar-grey-btn .x-btn-bc{
    background-position: 0 -15px;
}
.x-toolbar-grey-btn button{
    font-weight: bold;
}

因为 Ext 按钮图像位于文件“/ext-3.3.3/resources/images/default/button/btn.gif”中，所以我只更改了 background-position强>属性。它看起来像原生按钮。

【讨论】：

【解决方案5】：

这非常接近：ExtJS Button Style Toolbar

在那个问题中找到了我正在寻找的答案：

添加

ctCls: 'x-btn-over'

按钮的配置使它看起来像一个按钮。这是一种 hack，因为这实际上是在设置工具栏按钮的样式，使其看起来像是被悬停在上面，但就我而言，我认为这已经足够了。

edit：我从版本 3 开始就没有接触过 ExtJS，所以看起来这不再有效了。

【讨论】：

你能包含更多代码吗？我试过这个：},{ xtype: 'button', text: 'asfasdf', ctCls: 'x-btn-over' } 但它没有用