View Full Version : Problems with TextField Hidden

5 Jun 2009, 7:37 AM
I have a problem using Hidden TextField: spaces will keep between them, so if you have a lot of hidden field you can see a lot of empty space.

I try using different configuration, but I don't found a solution.

I was amazed also that to Hide a Field I must also hide the label myself,
I believe this was and automatic feature...

Of couse someone can ask me "why you put hidden field between displayed fields ? put them as HiddenText or put them at the end of the form"...
I cannot do it.. because there are some application business logic (it is a long discussion) that after need to display it again..

There is a way to remove that empty space ?

This is a simple test case:

<html dir=''>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<link rel="stylesheet" type="text/css" href="lib/extjs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="lib/css/main.css" />
<link rel="stylesheet" type="text/css" href="lib/css/icons.css" />
<link rel="stylesheet" type="text/css" href="lib/css/hacks.css" />
<script type="text/javascript" src="lib/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="lib/extjs/ext-all.js"></script>
Ext.onReady(function() {
var vItems = new Array();

vItems.push(new Ext.form.TextField({
name: 'F1',
fieldLabel: 'Field 1 Visible',
labelSeparator : ''
for(var i = 2; i < 12; i++)
vItems.push(new Ext.form.TextField({
name: 'F'+1,
fieldLabel: "Field "+i+" Hidden",
labelSeparator : '',
grow : true,
autoWidth: true,
autoHeight: true,
clearCls : '',
hidden : true,
hideLabel : true, // I need to force also HideLabel, otherwise label is displayed
//hideParent : true, // no effect for my test...
//hideMode : 'visibility' // No collapse of empty space
//hideMode : 'offsets' // It collapse a bit.. but a lot of space keeped
hideMode : 'display' // same results of offsets
vItems.push(new Ext.form.TextField({
name: 'F12',
fieldLabel: 'Field 12 Visible',
labelSeparator : ''
vItems.push(new Ext.form.TextField({
name: 'F13',
fieldLabel: 'Field 13 Visible',
labelSeparator : ''
new Ext.form.FormPanel({
renderTo: document.body,
items: vItems


5 Jun 2009, 7:47 AM
Use this: http://extjs.com/deploy/dev/docs/?class=Ext.form.Hidden

5 Jun 2009, 7:55 AM
Hi Animal.
I just explain

Of couse someone can ask me "why you put hidden field between displayed fields ? put them as HiddenText or put them at the end of the form"...

I wrote "HiddenText", but of course I mean "Ext.form.Hidden"... and as I just wrote.. .I cannot use it... because for same application purpose, I need in a second time to display that field. If I use Ext.form.Hidden fields I need to recreate them completely (it can be a TextField, or DateField or a NumberField or a ComboBox, a MultiSelect, a ItemSelector and so on... ).
So it is more more simple to switch the hidden attribute to true or false according my needs... But there is the problem about empty spaces...

5 Jun 2009, 9:47 AM
Looks like hiding is not hiding the whole wrapped item.

I thought this had been fixed!

5 Jun 2009, 9:38 PM
So do you suggest to mark this issue as a bugs?