css - Extjs 4中的按钮文本颜色

Question

我正在使用Exjts 4，我想更改按钮文本颜色。这是我的代码：

{
     xtype: 'button',
     text: 'My Button',
     style:{
         color: 'red'
     }  
}  

Answer 1

以防有人需要。我不知道这是否是一个肮脏的解决方案，但它有效

{
 xtype: 'button',
 text: '<div style="color: red">My Button</div>',     
}  

Answer 2

Davor Zubak 阐明了一个解决方案，尽管它在我的复杂应用程序中失败了。我通过这个实现了我想要的：

1. 按钮的 cls：'myButton'

2. 在我的 css 文件中，定义：

   .myButton .x-btn-inner {
       color: red;
       font-family: Georgia;
       font-size: large;
       font-weight: bold;
   }
   

这样，它只会覆盖具有“myButton”cls 的特定按钮的 ExtJS 主题。

Answer 3

Extjs 4.2.0中有一些奇怪的行为，但可以进行覆盖。给你button一个classusingcls:'yourClassName'属性，然后在 CSS 中创建一个span保存文本的完整路径，如下所示.yourClassName div a span：还要给你的 css 属性一个!important值以成功覆盖基类。

Ext.create('Ext.Button', {

    text: 'Click me',

    renderTo: Ext.getBody(),

    handler: function() {
        alert('You clicked the button!');
    },

    cls: 'foo'
});

并且简单地在 css 中：

.foo div a span
{
    color:#ff0000 !important;
}

这是一个例子。