View Full Version : [FIXED] Rendering problem with Ext.form.field.Display

27 Nov 2012, 3:44 AM
Ext version tested:

Ext 4.1.3

Browser versions tested against:

Chrome 23 (Windows)
Firefox 12.0


Ext.form.field.Display - Rendering problem in vbox layout.

Steps to reproduce the problem:

Create an Ext.form.field.Display and add to a form with vbox layout.

The result that was expected:

Three lines of text should be rendered.

The result that occurs instead:

The test is clipped after one and a bit lines.

Test Case:

var panel = Ext.create('Ext.panel.Panel', {
title: 'Tester',
width: 200,
height: 500,
collapsible: true,
renderTo: Ext.getBody()
}), innerPanel1, innerPanel2;

innerPanel1 = Ext.create('Ext.form.Panel', {
title: 'Inner Form 1',
layout: { type: 'vbox', align: 'stretch' },
width: 200,
collapsible: true
innerPanel2 = Ext.create('Ext.form.Panel', {
title: 'Inner Form 2',
layout: { type: 'vbox', align: 'stretch' },
width: 200,
collapsible: true


innerPanel1.add(Ext.create('Ext.form.field.Display', {
name : 'description',
value: 'This is a really long display field that will wrap around onto a second line and create a rendering problem.'
innerPanel2.add(Ext.create('Ext.form.field.Display', {
name : 'description',
value: 'This is a really long display field that will wrap around onto a second line and create a rendering problem.'

27 Nov 2012, 11:25 AM
Maybe this is just a stripped down example but is there a reason to use a display field for this?

Also, in box layouts there is a performance degradation when you use auto sizing as we have to calculate the size so it's not optimal.

27 Nov 2012, 2:03 PM
If you inspect the elements, the display field itself isn't the problem. The problem is that the panel containing the display field isn't having it's height set or managed by any explicit layout (the parent panel containing the sub-panels has no layout set). As Mitchell said, it's hard to know if the example really represents what you are trying to do in your app, but it is usually a good idea to always have a layout set on each container/panel. Very rarely is the auto layout (the default) appropriate for most use cases, from my experience at least.

It's also hard to know what to suggest you change without knowing what you are really trying to do. You probably could get rid of the intermediary panels and just have the display fields be children of the parent panel itself, then set that to use the vbox layout. Then set your flex values on the display fields to work out the height ratio between the 2 fields, or just use flex: 1 on both to have them split the vertical space evenly between them.

If you would like more specific help with figuring out an appropriate layout strategy you might want to post in the premium help forum or open a support ticket, we would be happy to assist you further.

27 Nov 2012, 3:56 PM
As noted above, it's certainly not optimal to do this, however it should still work. Pushing to Jira.

28 Nov 2012, 12:22 AM
As noted this is just a very stripped down example to allow easy replication. The real code does indeed have layouts set on all containers. They just happen to all be vbox with auto height. The idea is to get the most compact layout of lots of different information panels stacked on top of each other. If there is a better way to achieve this I'm happy to be guided...

Also I have found that swapping to other multi line components does seem to render correctly, for example TextArea.

In contrast to the advice... I have found that removing all explicit layouts does actually seem to achieve what I want.


28 Nov 2012, 11:31 AM
Apologies for any misplaced advice, as Evan pointed out this should just work, so we'll get it fixed up.

Best regards,

29 Nov 2012, 12:17 AM
No problem.


3 Apr 2013, 3:34 PM

The problem turned out to be simpler than we thought initially; the fix will be available in 4.2.1 and for now you can use a workaround: add 'noWrap: false' to display field config and it should look like you expect.


4 Apr 2013, 12:01 AM