Position a image next a textfield in a form - extjs6

Question

I have a form with some text fields. One of them is a image upload button.
I need to put the image preview box (a div) to the right side of the field (after the field button).
I already do the hard work by creating the div in the afterrender event:
listeners: {
afterrender: function ( cmp ) {
var container = this.body.dom.id;
$("#" + container ).append('<div style="position:absolute;
left:DONTKNOW;top:DONTKNOW" id="myPictureDiv"></div>');
}
}
how can I position elements in a ExtJS form? Can I use position:absolute ? But how to find the button position? What about form resizing?
EDIT: Image to illustrate scebotari's solution alignment problem:

Answer 1

One solution for this is to create the additional div as a component and to place it in a "fieldcontainer" with the main field.
{
xtype: 'fieldcontainer',
layout: 'hbox',
items: [{
xtype: 'textfield',
fieldLabel: 'Picture'
},{
xtype: 'component',
autoEl: 'div',
width: 32,
height: 32,
margin: '0 0 0 5',
style: 'border: 1px solid #d0d0d0; border-radius: 50%'
}]
}
Here is a fiddle illustrating this concept

Answer 2

This is the Form field
fieldLabel: 'My Field',
width: 330,
id: 'displayColumn',
name: 'displayColumn',
allowBlank : false,
value : '#CACACA',
This is the form listener:
listeners: {
afterrender: function ( cmp ) {
// Get the Window Container
var container = this.body.dom.id;
// Get the Component (ExtJS way)
var comp = Ext.getCmp("displayColumn");
// The ExtJS field ID is not the same you gave
var el = comp.getEl();
// Get the real Field ID
var displayColumnId = el.id;
// If you need its value...
var initialColor = comp.getValue();
// If you need to hide the field to make room to your div...
// I mean if you want to replace the field and keep the label...
// <YOUR_FIELD_ID>-triggerWrap
$("#displayColumn-triggerWrap").css("display","none");
// Append your div to the field container
// <YOUR_FIELD_ID>-bodyEl
$("#displayColumn-bodyEl").append(YOUR_DIV);
}
}
Do some style to the div as you wish