PDA

View Full Version : Label as form field



moadib2k
24 Nov 2009, 10:05 AM
I am trying to put a label in as a form field. I set the xtype to 'label' but it still renders as a textbox. Is there something I am missing?

I also tried to create a new Ext.form.Label directly but when I add it to the form it renders incorrectly.

CrazyEnigma
24 Nov 2009, 10:33 AM
Code please.

It would hard to decipher what you did wrong.

moadib2k
24 Nov 2009, 10:50 AM
I did a quick and dirty sample, I was using 3.0 last night and have 3.0.3 today. Last night it would only render text boxes. Today it renders the label but without text in it. If I set the text directly, it renders the text but its not in the correct position.

This can replace dynamic.js in the examples



Ext.onReady(function(){
Ext.QuickTips.init();
// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';
var bd = Ext.getBody();
/*
* ================ Simple form =======================
*/
bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});

var simple = new Ext.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
url:'save-form.php' (http://www.extjs.com/forum/'save-form.php'),
frame:true,
title: 'Simple Form',
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {width: 230},
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
xtype:'label'
},{
fieldLabel: 'Last Name',
name: 'last',
xtype:'label',
text: 'foo'
},{
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}, new Ext.form.TimeField({
fieldLabel: 'Time',
name: 'time',
minValue: '8:00am',
maxValue: '6:00pm'
})
],
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});
simple.render(document.body);

});

aw1zard2
24 Nov 2009, 11:01 AM
For labels use text: 'First Name',

CrazyEnigma
24 Nov 2009, 11:08 AM
So what you are trying to accomplish is to prevent the user from editing the field.

This might not be desirable but you can set the textField to readOnly.
or
xtype: 'displayfield' instead of 'label'

moadib2k
24 Nov 2009, 11:08 AM
For labels use text: 'First Name'

In my sample I used text:'foo'

It does not render in the correct location. it's rendering high. Also, that would mean there is no way to bind the field to a value. So for display only type fields I would have to regenerate all the text when delivering the page.

aw1zard2
24 Nov 2009, 11:14 AM
The height of the label isn't the same as the textfield use firebug get the height of the textfields and use css center/middle to get it dead center if you want.

I attached an image of one of my new user forms.
I correct the padding and margins and adjust the height of the label on the left side.

:)

moadib2k
24 Nov 2009, 11:37 AM
So what you are trying to accomplish is to prevent the user from editing the field.

This might not be desirable but you can set the textField to readOnly.
or
xtype: 'displayfield' instead of 'label'

readOnly is the wrong appearance, but displayField is exactly what I was looking for. It still renders incorrectly though (its high in i.e. 8).

CrazyEnigma
24 Nov 2009, 11:48 AM
Define high?

I am running IE8 and FF, and it looks fine to me. Is it a serious rendering issue? Or just out by a couple of pixels off. You can use CSS to try to fix it.

Post your display result.

moadib2k
24 Nov 2009, 12:31 PM
Define high?

I am running IE8 and FF, and it looks fine to me. Is it a serious rendering issue? Or just out by a couple of pixels off. You can use CSS to try to fix it.

Post your display result.

I attached a png of the output. I added the green lines to show where it is aligning the text.

CrazyEnigma
24 Nov 2009, 12:36 PM
It's your CSS, Notice that the Label A, B, and C are also not aligned.

moadib2k
24 Nov 2009, 12:45 PM
It's your CSS, Notice that the Label A, B, and C are also not aligned.

Thats the stock Ext css files. I did not apply any styling. I went into the examples folder and added xtype:'displayfield' to the form-grid.js file on line 165.

The A: B: C: problem appears if I go to the ext demo site:

http://www.extjs.com/deploy/dev/examples/form/form-grid.html

EDIT: Its also off in FireFox 3 on the above url

moadib2k
25 Nov 2009, 6:47 AM
Does anyone else see the mis-aligned rendering from this url?

http://www.extjs.com/deploy/dev/examples/form/form-grid.html

aw1zard2
25 Nov 2009, 8:07 AM
Yes the radio buttons text is higher reason I said to check the padding, margins, and height css cause I've had to correct mine to get things aligned up.

:)