CSS 样式未应用于 ExtJS 按钮

Question

我已经为嵌套在面板中的按钮添加了CSS样式。但是，即使我在CSS中加上!important标签，按钮也不会显示为透明。

我还尝试为按钮对象添加addStyles/cls:标签，但也没有起作用。

有人知道这可能是为什么吗？

按钮代码：

var button = new Ext.Button({
                text: month,    
                //cls: "test",
                handler: function(button){
                    var buttonMonth = button.text;
                    getGrids(buttonMonth);
                }
            });
            //button.addClass("test");
            panel.add(button);  

CSS类：

.x-btn{
    font:normal 11px tahoma, verdana, helvetica;
    cursor:pointer;
    white-space: nowrap;
}

.x-btn button {
    border:0 none;
    background:transparent !important;
    font:normal 11px tahoma,verdana,helvetica;
    padding-left:3px;
    padding-right:3px;
    cursor:pointer;
    margin:0;
    overflow:visible;
    width:auto;
    -moz-outline:0 none;
 }

- pm13

---

两个问题，第一个是你正在使用哪个版本的ExtJS？第二个是你编写的CSS类是否是当前按钮具有的CSS？还是你试图应用什么？ - nscrob

您已添加了类“test”，为什么不使用它进行选择？ - Kyle

我正在使用版本3.4。如果你看一下，类“test”被注释掉了，因为它与之前的css类不兼容。你所说的css类是按钮具有的css类吗？我尝试将该类添加到按钮上，但在博客中看到了这个css，它说会应用于所有按钮。类似于网格css的x-grid3。 - pm13

我对你的CSS进行了小修改，只是为了使它透明，但如果你想要更多的修改，我建议你使用一些开发者工具并检查按钮具有哪些CSS类，然后重写它们。 - nscrob

Answer 1

按钮的背景是通过在中使用background-image来设置的。这应该有效（这里是演示）：
JS：

var button = new Ext.Button({
    text: month,    
    cls: "test",
    // ...
});

CSS:

.test td {
    background-position: 1000px 1000px;
}

- Molecular Man