ExtJS 工具栏中的按钮外观

Question

嘿，我有一个小问题，但似乎找不到答案。

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

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

- GumaTerror

Answer 1

试试这样做：

尝试像这样：

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

- fakelbst

Answer 2

这个与此相当接近：ExtJS 按钮样式工具栏

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

添加

ctCls: 'x-btn-over'

将按钮的配置添加到代码中，使其实际上看起来像一个按钮。这有点像一种hack，因为本质上是通过样式来让工具栏按钮看起来像是被悬停在上面，但在我的情况下，我认为这已经足够好了。

编辑：自从3版本以来，我就没有接触过ExtJS，所以看起来这个方法不再适用。

- James Fiala

---

你能加入更多的代码吗？我尝试了这个：},{ xtype: 'button', text: 'asfasdf', ctCls: 'x-btn-over' }但它没有起作用。 - Oliver Watkins

Answer 3

您需要将其包装在面板中，这里是Extjs 4.2.5的解决方案。

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

- Yuriy Kvartsyanyy

Answer 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属性。它看起来像本地按钮。

- Andriy Leshchuk

Answer 5

在Sencha论坛上查看此帖 工具栏按钮样式。我也发现将按钮样式设置为文本对用户来说相当不直观。只需在您的ExtJs CSS主文件中添加几行CSS代码，即可全局更改应用程序的外观。

- Joseph Lust