ExtJS的按钮

Question

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

当我在ExtJS的工具栏放置一个按钮，它会出现一个默认外观（像任何窗口工具栏选项）

我如何使它看起来像一个形式的按钮？

Answer 1

看到这个职位上的煎茶论坛Toolbar Button Style.我也发现了一个按钮，文本很直观，为用户的这个造型。只需将几行CSS添加到您的ExtJs css主文件中，您就可以为您的应用程序全局更改此外观。

Answer 2

这是相当接近的：ExtJS Button Style Toolbar

我一直在寻找这个问题找到答案：

添加

ctCls: 'x-btn-over' 

到该按钮的配置使得它实际上看起来像一个按钮。这是一种黑客攻击，因为它实质上是将工具栏按钮设计为看起来像是在悬停，但在我的情况下，我认为这已经够好了。

编辑：我没碰过ExtJS的，因为3版本，所以它看起来像这样不再有效。

Answer 3

尝试这样的：

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

Answer 4

这里是我的解决方案（它为ExtJS的3.3.3）：

对于按钮添加额外的类，我把它命名为“X-工具栏，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'，我只更改了背景位置属性。它看起来像原生按钮。

Answer 5

你必须包装在一个面板上，这里是ExtJS的4.2.5

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