View Full Version : Display field values overlap each other vertically when loading a form

31 Jul 2013, 9:32 AM
Display field values overlap each other vertically when loading a form through loadRecord
I have an Ext.form.Panel, modified from the example in 4.2.1's. To show the problem easily, the code below has values hard coded in.

Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
title: 'Student Information',
bodyPadding: 10,
items: [{
xtype: 'displayfield',
fieldLabel: 'Student Name',
name: 'businessName',
id: 'transbusinessname',
value: 'Quite a very very very long name indeed that will'
xtype: 'displayfield',
fieldLabel: 'Email',
value: 'test@test.com'

But the problem also happens when I load a form using loadRecord. If the value is quite long without spaces, the word doesn’t wrap and it looks just cut off on the side. But if the value has spaces like the example above, it wraps but the 2nd field below doesn't get adjusted, so it overlaps.

I also tried calling doLayout, Ext.AbstractComponent.updateLayout(), and updateLayout on the panel but the Student Name field's values still overlaps the Email field's values. I also tried a mix of the following: hbox, vbox, flex: 1 on every field, and anchor: '100%'.

What am I missing?

Gary Schlosberg
4 Aug 2013, 9:26 AM
I'm unable to recreate this issue using the example you provided -- the field expands to contain the large text without encroaching into the field below. Could you provide a more complete example that reproduces the problem?

27 May 2014, 9:28 AM
I am also facing same issue. If you keep the layout of form panel as table with two columns and then give two display fields in one row. Then give the "large value"(in terms of string length) in first column and smaller value in second column, you will see the first field overlaps second. This does not happen if first column is small amd second field is large.