Question

我的目标是将样式应用于ExtJS按钮及其菜单。

我在将css类的样式应用到按钮时遇到了麻烦。我尝试了以下代码：

CSS：

.testStyle {
    font-size: 20px !important;
    color: red !important;
}

ExtJS的：

Ext.onReady(function() { 
Ext.create("Ext.button.Button", {
        text: 'Payment',
        scale: 'large',
        cls: 'testStyle',
        renderTo: Ext.getBody(),
        menu: [ { text: 'Visa' },
                { text: 'Mastercard' },
                { text: 'American Express' }
        ]
    })
});

但没有快乐。我也试过这个：

Ext.onReady(function() { 
Ext.create("Ext.button.Button", {
        text: 'Payment',
        scale: 'large',
        renderTo: Ext.getBody(),
        menu: [ { text: 'Visa', cls: 'testStyle' },
                { text: 'Mastercard', cls: 'testStyle' },
                { text: 'American Express', cls: 'testStyle' }
        ]
    })
});

但这也没有用。我尝试过使用ExtJS提到的各种其他类/样式选项，但没有任何效果。我也尝试了有和没有！重要。有什么想法吗？

Answer 1

实际上，有几种选择。快速选项是为组件添加样式。像这样：https://fiddle.sencha.com/#fiddle/ti8

   style: {
       'background-color': 'green',
       'color': 'white'
   },

如果要添加css文件，则应在app.json文件中定义文件路径。

"css": [
    {
        "path": "/myStyle.css"
    }
],

建议的选项是使用sass。请检查一下：

http://docs.sencha.com/extjs/5.0/core_concepts/theming.html

在ExtJS中设置按钮（或菜单）的样式

1 个答案: