EXT JS: css and position relative to parent container - css

Question

I would like to put favorite star icon at the upper right corner of the parent container. I created css with absolute position, but it doesn't work.
I created span field and used font-awesome (in this case fa fa-star, although it is not so important, because the same result is obtained for simple text).
Can anyone tell me how to place this star at the upper right corner of the parent container?
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

This is a simple way to do it, just put that listener on the child component:
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) ;
}
}
That way, when the child component is rendered it put a float box on the parent component, you could put that listener on the main panel instead and just test for conditions to show, just remove the ownerCt part.

Answer 2

Classic 7.3.1 Material
I am not sure how to get the font awesome icons in the non-material themes.
Here is a fiddle using the classic toolkit.
You can drag the main container and the icon moves with the container.
You can style the button however you want and it has a tool-tip.
If you plan on allowing resize of the container then you will have to implement the resize event handler and call setPosition on the button.
Classic Toolkit fiddle
This puts a button in the top left corner of the browser.
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