Ext.form.TextField and Labels

[Dumbledore]

How can i set that only the first row of a fieldset have labels and all other Form.Elements should have no labels? I know that i can hide the labels, but when i have the labelAlign: "top" then the labels are only hidden not removed.
So i have much space between the rows - how can i remove this space?



var topRight = new Ext.form.Column({width:200}); // open column, without auto close
formRules.start(topRight);

var protocol = new Ext.data.SimpleStore({
fields: ['protokoll', 'protokoll_value'],
data: [['tcp', 'tcp'], ['udp', 'udp'],['egp', 'egp'],['esp', 'esp'],['igmp', 'igmp'], ['gre', 'gre'],['rsvp', 'rsvp'],['vines', 'vines']]
});

formRules.add(
new Ext.form.ComboBox({
fieldLabel: 'Protokoll',
hiddenName:'state',
store: protocol,
displayField:'protokoll',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
selectOnFocus:true,
width:175,
allowBlank:true
})
);

for(var i = 0; i <= 8; i++){
formRules.add(
new Ext.form.ComboBox({
labelSeparator:'',
labelWidth:0,
hiddenName:'state',
store: protocol,
displayField:'protokoll',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
selectOnFocus:true,
width:175,
allowBlank:true
})
);
}
formRules.end(topRight);
formRules.end(top);

[tryanDLS]

The form config hideLabels:true adds display:none to the label, so it doesn't have a height. If you want to further reduce the space, you have to adjust the padding of the field.

[Dumbledore]

hmm, howto? My Problem is, that the first field should have a label and all others below not.
When i use this piece of code:



var formRules = new Ext.form.Form({
labelAlign : "top",
url:'save-form.php'
});

var top = formRules.fieldset( {
legend:'LAN-Netzwerkkonfiguration'
});

var topLeft = new Ext.form.Column({width:200});
formRules.start(topLeft);

formRules.add(
new Ext.form.NumberField({
fieldLabel: 'Port',
labelSeparator:'',
name: 'ip',
vtype:'ip',
width:175,
allowBlank:true
})
);

formRules.add(
new Ext.form.NumberField({
labelSeparator:'',
labelWidth:0,
name: 'ip1',
vtype:'ip1',
width:175,
allowBlank:true
})
);
formRules.end(topLeft);


I in the second field i set
labelSeparator:'', labelWidth:0, but there will a label be rendered. See Screenshot.
Is it not possible to have only labels in the first row of a form?

[Dumbledore]

Hi,

when i use following code with labelAlign:left the label is not visible:


new Ext.form.NumberField({
fieldLabel: '',
labelSeparator:' ',
labelWidth:0,
name: 'ip',
vtype:'ip',
width:175,
allowBlank:true
})
);


But with labelAlign:"top" the labelAlign are only invisible but need extra space. See Screenshot.

Any solution?

[Dumbledore]

after a long search a found a solutio. When i set labelStyle of the Element, i can set display:none.
That

[tryanDLS]

That's b/c that's not necessarily a public property. You could accomplish this with hideLabels:true (which is documented), and internally sets display:none

EDIT: removed my previous comment about how to do this and merged your bug thread into this thread.

[Dumbledore]

Hi tryanDLS,

this won

[tryanDLS]

For now, I would say that your solution will work. I'll speak to Jack regarding whether there's any reason why Field.labelStyle can't be publicly exposed - maybe it's just an oversight in the doc.

[Dumbledore]

thanks a lot...