Question

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

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

如何让它看起来像一个表格中的按钮？

Answer 1

试试这样：

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

Answer 2

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

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

Answer 3

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

Answer 4

这非常接近：ExtJS Button Style Toolbar

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

添加

ctCls: 'x-btn-over'

按钮的配置使其实际上看起来像一个按钮。这有点像黑客，因为这实际上是工具栏按钮的样式，看起来像是在盘旋，但在我的情况下，我认为这已经足够了。

编辑：我从版本3开始就没有触及ExtJS，所以它看起来不再适用了。

Answer 5

这是我的解决方案（适用于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 财产。它看起来像原生按钮。

工具栏外观中的extjs按钮

5 个答案: