如何添加框中图像组件EXTJs 3.4_Extjs_Extjs3

如何添加框中图像组件EXTJs 3.4

extjs

如何添加框中图像组件EXTJs 3.4,extjs,extjs3,Extjs,Extjs3,我想向列表中添加一个图像。我使用的是xtype:“box”，因为extjs3.4中没有imagextype 代码如下： { xtype: 'box', width: 16, height: 16, cls: 'icon', listeners: { scope: this } } css: 但是我没有看到图标被渲染我错过了什么谢谢背景图像URL解析不正确这里有一个POC代码： app.js Ext.onReady(func

我想向列表中添加一个图像。我使用的是

xtype:“box”

，因为extjs3.4中没有image

xtype

代码如下：

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

css:

但是我没有看到图标被渲染

我错过了什么

谢谢

背景图像URL解析不正确

这里有一个POC代码：

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>


.图标{
背景图片：url(http://www.hermosaprogramacion.com/wp-content/uploads/2016/01/floating-action-button-ejemplo.png);
}

这里是工作小提琴：

另一个解决方案（test.html）：


Ext.onReady（函数（）{
外部创建({
xtype:'窗口'，
标题：“图像”，
宽度：400，
身高：300，
布局：“vbox”，
项目：[{
xtype:'框'，
宽度：16，
身高：16，
autoEl：{
标签：“img”，
src:“../img/remove icon.png”
}
}]
}).show（）；
});
“测试”

注: 使用ExtJS3.4.0进行测试

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

<html>

<head>
    <link rel="stylesheet" type="text/css" href="../ext-3.4.0/resources/css/ext-all.css">
    <script type="text/javascript" src="../ext-3.4.0/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../ext-3.4.0/ext-all.js"></script>
    <script type="text/javascript">
        Ext.onReady(function() {

            Ext.create({
                xtype: 'window',
                title: 'Image',
                width: 400,
                height: 300,
                layout: 'vbox',
                items: [{
                    xtype: 'box',
                    width: 16,
                    height: 16,
                    autoEl: {
                        tag: 'img',
                        src: '../img/remove-icon.png'
                    }
                }]
            }).show();

        });
    </script>
    <title>'TEST'</title>
</head>

<body></body>

</html>