Как добавить изображение в рамку компонента EXTJs 3.4 - PullRequest
Новая
       14

Как добавить изображение в рамку компонента EXTJs 3.4

0 голосов
/ 08 мая 2018

Я хочу добавить изображение в список. Я использую 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 голосов
/ 08 мая 2018

Другое решение (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.

0 голосов
/ 08 мая 2018

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>

Вот рабочая скрипка: https://fiddle.sencha.com/#view/editor&fiddle/2gdt

...