如何让`：after`在extjs iconCls中工作？

Posted 2023-02-26

【中文标题】如何让`：after`在extjs iconCls中工作？

【英文标题】：How to get `:after` to work in extjs iconCls?

【发布时间】：2013-05-27 19:09:54

【问题描述】：

我的树节点图标的 css 如下：

.icon 
    background: url(http://dummyimage.com/100x100/ccc/fff);
    width: 100px;
    height: 100px;
    position: relative;

.icon:after 
    background: url(http://dummyimage.com/32x32/f0f/fff);
    width: 32px;
    height: 32px;
    display: block;
    content: ' ';
    position: absolute;
    bottom: 0;
    right: 0;

我将iconCls 设置为"icon" 但它不起作用，我也尝试了"icon icon:after" 和"icon:after" 但没有运气。

我使用现代浏览器并且我的覆盖 css 是有效的，但 extjs 似乎不理解它。我该如何克服这个问题？

【参考方案1】：

图标元素默认为<img> 元素。它的内容被图像替换。您不能将 :before 或 :after 与它一起使用，因为它们构成了被替换内容的一部分。您需要覆盖 Ext.tree.Column 中的 treeRenderer 以应用您的第二张图片。

【讨论】：

hmm.. 我会试试看，我还不确定如何扩展 ext.tree.column，但会尝试。

"注意这是框架内部使用的私有实用程序类。不要依赖它的存在。"(docs.sencha.com/extjs/4.1.0/#!/api/Ext.tree.Column)

当然。所以替换整个班级。无论如何，Ext.tree.Column 中除了 treeRenderer 之外没有太多内容。它仍然可以从没有此类警告的 Ext.grid.column.Column 派生。

【参考方案2】：

看起来你忘记了你的一个测试中的类前缀尝试.icon:after

【讨论】：

这只是一个错字，我的css中没有空格

对不起，我误解了你。你是说我应该尝试包含括号吗？