View Full Version : [CLOSED][3.??] Issue in Display Field

8 Jan 2010, 11:19 AM
I am using 3.1 version. I am facing 2 issues in using DisplayField. Please refer attached image for these issues

My Source Code:

var SerNum = new Ext.form.DisplayField({
fieldLabel: 'Serial Number',
labelAlign: 'left',
align: 'right',
width: 100,
name: 'SerNum',
value: '345'

Issue 1: Both Label and Value are not touching the straight line. I thought of using Label instead of using DisplayField. But it doesn't fit with my other component such as TextField, Combo, etc which I display along with this. It creating alignment problem and I want to use DisplayField.

Issue 2: Disabling the display field changes the value field color to GRAY. Even if I change css file to BLACK, it showing as GRAY only in IE8. But it works fine in Firefox.

Can anyone help me on this or solved similar issues?

17 Feb 2010, 6:52 PM
Refer to this thread: http://www.extjs.com/forum/showthread.php?t=86739 for a workaround to make the alignment work.

The graying of the displayfield is because it inherits this behavior from the Component object, which just applies the x-item-disabled css class to a component, which is a 60% opaque black (ie it looks gray). You can override this by specifying

disabledClass: 'anotherClass'

as a property of your displayfield.

17 Feb 2010, 7:18 PM
A possible patch for the css (either put this in your css or they should patch ext-all.css)

.x-form-display-field, .ext-gecko .x-form-display-field, .ext-strict .ext-ie7 .x-form-display-field {
display: block;
padding: 3px 0px 0px 0px;
padding-left: 0px;
position: relative;
z-index: 2;

18 Feb 2010, 7:48 AM
This works for me now with the above source code