如何在盒子组件EXTJs 3.4中添加图片

Question

我想将图像添加到列表中。我正在使用 xtype: "box"，因为 extjs 3.4 中没有图像 xtype。

代码如下：

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

css:

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

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

我错过了什么？

谢谢！

Answer 1

背景图片 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>

这里正在工作fiddle:https://fiddle.sencha.com/#view/editor&fiddle/2gdt

Answer 2

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

<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>

备注：使用 ExtJS 3.4.0 测试。

如何在盒子组件EXTJs 3.4中添加图片

How to add image in box component EXTJs 3.4

extjs

extjs3