Extjs 显示字段表单对齐

我需要帮助，请我有一个表格，有几个文本字段和显示字段，但有些与文本字段和显示字段不对齐

我能做到的

编辑/更新：

如果你是对的，我必须更具体一点

这是我的代码：

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
                }]
    }); 

这是代码，这些是它的图片，我想要这个

所以我需要这个

---

谢谢

我通过增加组件的宽度解决了这个问题

ej:

宽度：445

---

应更改宽度以适合其他组件。

请通过JSFIDLE共享您的代码更新文章，并提供参考图像的链接，谢谢