EXT JS: css 和相对于父容器的位置

Question

我想把最喜欢的星星图标放在父容器的右上角。我用绝对位置创建了 css，但它不起作用。
我创建了 span 字段并使用了 font-awesome（在本例中是 fa fa-star，尽管它不是那么重要，因为对于简单文本也可以获得相同的结果）。谁能告诉我如何把这颗星星放在父容器的右上角？

app.js

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.Container', {
            renderTo: Ext.getBody(),
            
            width: 300,
            style:'border:1px black solid',

            layout: {
                type: 'vbox',
                align: 'middle'
            },

            defaults: {
                margin: 5
            },

            items: [{
                xtype: 'image',
                height: 128,
                width: 128,
                src: 'https://www.disneyclips.com/images/images/roojumping2.gif'
            }, {
                xtype: 'component',
                html: 'Hello'
            },
            {
                html: '<span class="fa fa-star topright"></span>',
            },
            ]
        });
    }
})

app.css

.topright {
  position: absolute;
  top: 8px;
  right: 16px;
  font-size: 28px;
}

index.html

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

Answer 1

经典 7.3.1 Material

我不确定如何在非material 主题中获得超棒的字体图标。

这里是fiddle使用经典工具包。

您可以拖动主容器，图标会随着容器移动。您可以根据需要设置按钮的样式，并且它有一个工具提示。

如果您计划允许调整容器的大小，那么您将必须实施调整大小事件处理程序并在按钮上调用 setPosition。

Classic Toolkit fiddle

这会在浏览器的左上角放置一个按钮。

    let body = Ext.getBody();

    let button = Ext.widget('button', {
        text: 'Favorite',
        iconCls: 'x-fa fa-star',
        ui: 'round',
        floating: true,
        renderTo: body,
        style: 'position: absolute; top: 20px; right: 20px;'
    });

Fiddle floating button

Answer 2

这是一种简单的方法，只需将监听器放在子组件上即可：

listeners:{
    afterRender: function (a){

        var floatBox = document.createElement('div');
         //classic doesn't have fontAwesome, use a image instead
        floatBox.innerHTML = '<img class="fa fa-star topright" src="https://d1nhio0ox7pgb.cloudfront.net/_img/g_collection_png/standard/16x16/star.png" ></img>';            
        a.ownerCt.el.dom.appendChild(floatBox) ;

    }
}

这样，当子组件被呈现时，它会在父组件上放置一个浮动框，您可以将该侦听器放在主面板上，只测试要显示的条件，只需删除 ownerCt 部分。

EXT JS: css 和相对于父容器的位置

EXT JS: css and position relative to parent container

css

extjs