CODEWITHSUNDEEP
extjs6
Magno C
Magno C

Reputation: 2206

Position a image next a textfield in a form

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:

enter image description here

Upvotes: 0

Views: 58

Answers (2)

Magno C
Magno C

Reputation: 2206

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

Upvotes: 0

scebotari66
scebotari66

Reputation: 3480

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

Upvotes: 1

Related Questions