DisplayFields Form Align

Question

I need help please I have a form with several text fields and display fields but some are not aligned with the textfields and displayField

as I can do it! ?

EDIT / UPDATE :

If you are right, i had to be more specific

this is my code:

var GridAllUsr = new Ext.form.FormPanel({
        border: true,
        url : 'UpdateUsers',
        id: 'FormUpdt',
        bodyPadding: '15 0 0 5',
        fieldDefaults: {
            labelAlign: 'left',
            labelWidth: '50%'
        },items: [{
                xtype:'displayfield',
                fieldLabel: 'Username ',
                labelStyle: 'white-space: nowrap;font-size:14px',
                name: 'usuario',
                id: 'name_usr',
                margin: '10 0 0 10',
                    },{
                xtype:'textfield',
                fieldLabel: 'Name ',
                emptyText:'Set Name',
                labelStyle: 'white-space: nowrap;font-size:14px',
                name: 'nombre',
                id: 'nom_usr',
                maxLength: 50,
                enforceMaxLength : true,
                margin: '10 0 0 10',
                allowBlank : false
                },{
                xtype:'textfield',
                fieldLabel: 'LastName ',
                emptyText:'Set LastName',
                labelStyle: 'white-space: nowrap;font-size:14px',
                name: 'last_name',
                id: 'ape_usr',
                maxLength: 50,
                enforceMaxLength : true,
                margin: '10 0 0 10',
                allowBlank : false
                }]
    }); 

this is the code and these are pictures of how it is and I want this

https://i.sstatic.net/piD7m.png

so I need this

https://i.sstatic.net/LtQdV.png

thanks

Answer 1

I've solved it by adding more width to the component

ej:

width: 445

should change the width to fit to the other components.