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

时间:2018-05-07 23:27:07

标签: extjs extjs3

我想将图像添加到列表中。我正在使用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);
}

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

我错过了什么?

谢谢!

2 个答案:

答案 0 :(得分:1)

另一个解决方案(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进行测试。

答案 1 :(得分:0)

背景图片网址无法正确解析。

以下是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>

这是工作小提琴: https://fiddle.sencha.com/#view/editor&fiddle/2gdt