Search code examples
cssextjsextjs4extjs4.1extjs3

How to get `:after` to work in extjs iconCls?

My css for a tree node icon is the following:

.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;
}

I set iconCls to "icon" but it does not work, I also tried "icon icon:after" and "icon:after" but with no luck.

I use a modern browser and my overlay css is valid, but extjs doesnot seem to understand it. How can I overcome this problem?

Solution

  • The icon element is by default an <img> element. It's contents are replaced by the image. You can't use :before or :after with it, because they form part of the contents that get replaced. You will need to override the treeRenderer in Ext.tree.Column to apply your second image.