PDA

View Full Version : Hidden field in FormPanel renders empty <div class="x-field-hidden">



jessehattabaugh
30 Jul 2010, 1:05 PM
Pretty sure this was working last night, but this morning no longer. The JS for my form looks like this;


var login = new Ext.form.FormPanel({
url: 'auth/login',
standardSubmit : true,
autoRender: true,
floating: true,
modal: true,
centered: true,
items: [
{
xtype: 'hidden',
name: 'wtf',
value: 'mang'
}
]
});
login.show();

and the html rendered looks like this


<form method="post" id="ext-comp-1001" class="x-panel x-form x-floating" style="left: 543.5px; top: 252.5px; ">
<div class="x-panel-body" id="ext-gen1008" style="left: 0px; top: 0px; width: 38px; height: 38px; ">
<div id="ext-comp-1002" class="x-field x-field-hidden "></div>
</div>
</form>

TommyMaintz
30 Jul 2010, 1:43 PM
The reason the input is not rendered is because HiddenField has autoCreateField: false. This is because when you call getValues() or submit() on a FormPanel, it doesnt actually need the input to be there. Since you specified standardSubmit: true however, you do need the input to be there. You can achieve this by adding autoCreateField: true to your hidden field. We might automatically take care of this if standardSubmit is set to true in a future release. For now you can use the following code:



var login = new Ext.form.FormPanel({
url: 'auth/login',
standardSubmit: true,
floating: true,
modal: true,
centered: true,
items: [{
xtype: 'hidden',
name: 'wtf',
value: 'mang',
autoCreateField: true
}]
});
login.show();


For more info on autoCreateField you can check out the docs. http://www.sencha.com/deploy/touch/docs/?class=Ext.form.Field&member=autoCreateField

P.S. autoRender: true was redundant since the .show() call will make sure the panel is rendered before showing it.

jessehattabaugh
30 Jul 2010, 1:48 PM
Good to know! Thanks!