How to add image in box component EXTJs 3.4

Question

I want to add an image to a list. I'm using xtype: "box" as there is not image xtype in extjs 3.4.

Here is the code:

{
    xtype: 'box',
    width: 16,
    height: 16,
    cls: 'icon',
    listeners: {
        scope: this
    }
}

css:

.icon{
    background-image: url(../img/remove-icon.png);
}

But I dont see the icon getting rendered.

What I'm I missing?

Thanks!

Answer 1

Background image URL is not resolving correctly.

Here is a POC code:

app.js

Ext.onReady(function () {
    Ext.create({
        xtype: 'panel',
        renderTo: Ext.getBody(),
        title: 'Box Image Demo Panel',
        items: [{
            xtype: 'box',
            width: 170,
            height: 170,
            cls: 'icon',
            listeners: {
                scope: this
            }
        }]
    });
});

index.html

<style>
    .icon {
        background-image: url(http://www.hermosaprogramacion.com/wp-content/uploads/2016/01/floating-action-button-ejemplo.png);
    }
</style>

Here is working fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2gdt