PDA

View Full Version : How to create a hidden input field



gizzmo
4 May 2007, 4:24 AM
Hi

How can I create a hidden input field, without the label?

I tried:


var myField = new Ext.form.Field({
autoCreate: {
tag: 'input',
type: 'hidden',
name: 'myfield'
}
});

When I use this code and add it to a form I got a label and ':' as well...

Johan

fay
4 May 2007, 5:03 AM
Johan,


var MyField = new Ext.form.Field({
fieldLabel: '', name:'MyField', labelSeparator: ' ', boxLabel:'', hidden: true
});

hidden: true is the important bit.

Note, though, that this will include a "row" in your form. Sorry I couldn't be much more help. I definitely recommend searching the forum as this question has been asked before...

Fay

jsakalos
4 May 2007, 5:29 AM
In fact you do not need hidden fields in Ext as you can post additional name/value pairs in params object.

gizzmo
4 May 2007, 5:43 AM
Thanks, didn't know that you could pass params through the submit as name/value pairs.
Works great.

jsakalos
4 May 2007, 5:46 AM
You're welcome.

I'm glad I helped.

symfony
16 May 2007, 3:50 AM
In fact you do not need hidden fields in Ext as you can post additional name/value pairs in params object.

I'm loading my form-preselections from an url (via form.load(url: 'http://foo')), which works great. How can I get the values for the hidden fields?


form.submit({params:{id : VALUEFROMLOAD}})


kind regards frank

leoadell
16 May 2007, 7:11 AM
hey gizzmo use this to get your hidden field without label



var myField = new Ext.form.Field({
labelSeparator:" ",
style:"visibility:hidden;"
});

Green
17 May 2007, 6:37 AM
leo, works, but still leaves a space. This works much better and leaves no spaces:


Ext.form.HiddenField = function(config){
config.type = 'hidden';
config.inputType = 'hidden';
Ext.form.HiddenField.superclass.constructor.call(this, config);
};
Ext.extend(Ext.form.HiddenField, Ext.form.TextField, {
// private
onRender : function(ct, position){
if(this.el){
this.el = Ext.get(this.el);
if(!this.target){
ct.dom.appendChild(this.el.dom);
}
}else {
var cfg = {tag: "input", type: "hidden"};
if(!cfg.name){
cfg.name = this.name || this.id;
}
this.el = ct.createChild(cfg, position);
}
this.el.dom.readOnly = true;
this.el.dom.parentNode.parentNode.style.display = 'none';
this.initValue();
}
});

;)

jerometam
14 Jun 2007, 4:54 AM
leo, works, but still leaves a space. This works much better and leaves no spaces:


Ext.form.HiddenField = function(config){
config.type = 'hidden';
config.inputType = 'hidden';
Ext.form.HiddenField.superclass.constructor.call(this, config);
};
Ext.extend(Ext.form.HiddenField, Ext.form.TextField, {
// private
onRender : function(ct, position){
if(this.el){
this.el = Ext.get(this.el);
if(!this.target){
ct.dom.appendChild(this.el.dom);
}
}else {
var cfg = {tag: "input", type: "hidden"};
if(!cfg.name){
cfg.name = this.name || this.id;
}
this.el = ct.createChild(cfg, position);
}
this.el.dom.readOnly = true;
this.el.dom.parentNode.parentNode.style.display = 'none';
this.initValue();
}
});

;)

Excellent!!

Thank you very much~ :D

Your script helped me a lot!

danielv
18 Jun 2007, 5:55 AM
Thanks for that HiddenField extension. I spent some time looking for it initially, but ended up appending parameters to the url. This is a much better solution and does not require custom parsing for the field set data.

Good job. ~o)

ozilix
18 Jun 2007, 6:35 AM
try this.



.invisible{
display:none;
}




new Ext.form.NumberField({
fieldLabel: 'ID',
name: 'ID',
itemCls:'invisible'
}),

;)

rodiniz
24 Jul 2007, 10:15 AM
This saved me a lot of time thanks...I was about to write something similar.

life
2 Aug 2007, 5:12 AM
I've noticed that Fieldset has a labelSeparator property, which can be set to ' '.
I think it will be a good ideea to be able to specify the same property in the form ConfigOptions.
myForm.fieldset(
{
labelSeparator: '',
labelAlign: 'right',
hideLabels: true,
legend:'field set without : as in labels'
},

TheNakedPirate
6 Aug 2007, 11:43 PM
The hidden field extension was just the ticket.

The great thing about the post was that it also gave me some insight as to what is required to extend form fields...a million Thank Yous from the depths of my soul.

Xouqoa
21 Aug 2007, 11:56 AM
I decided to do this instead of messing with hidden fields.



form.on('beforeaction', function() {
// Modify the baseParams setting for this request.
form.baseParams = {
param1: param1,
param2: param2
};
});


Then just call that in your load function each time and pass the parameters you want to use along with it.

lgerndt
27 Aug 2007, 1:24 PM
Green, Thanks alot for the hidden input field code!

Xouqoa, thanks for the alternative, good to know about.

chun
7 Sep 2007, 3:13 AM
I have easy method
[CODE]
prjInfoForm.container(
{width:600,style:'display:none', clear:true},
new Ext.form.TextField({
id:'PrjId',
fieldLabel: 'PrjId',
name: 'PrjId',
hidden:true
})
)
[CODE]

That's OK

ArtBuilders
12 May 2008, 7:48 PM
Ext.form.HiddenField = function(config){
config.type = 'hidden';
config.inputType = 'hidden';
Ext.form.HiddenField.superclass.constructor.call(this, config);
};
Ext.extend(Ext.form.HiddenField, Ext.form.TextField, {
// private
onRender : function(ct, position){
if(this.el){
this.el = Ext.get(this.el);
if(!this.target){
ct.dom.appendChild(this.el.dom);
}
}else {
var cfg = {tag: "input", type: "hidden"};
if(!cfg.name){
cfg.name = this.name || this.id;
}
this.el = ct.createChild(cfg, position);
}
this.el.dom.readOnly = true;
this.el.dom.parentNode.parentNode.style.display = 'none';
this.initValue();
}
});



I love it! I'm little late to the party but just a minor tweak is needed to preserve the ID (which may come in handy later):


Change:


if(!cfg.name){
cfg.name = this.name || this.id;
}

To:


if(!cfg.name){
cfg.name = this.name;
cfg.id = this.id;
}

Otherwise it will get assigned auto-magically by EXTJS.

Green
12 May 2008, 10:24 PM
Well, if you use Ext2.x, you can use Class Ext.form.Hidden now. For ExtJS1.x this thread remains the better solution though, imho.