PDA

View Full Version : Checkbox Fieldset Labels



yankee_gal
18 Jan 2010, 9:35 AM
We're doing something very similar to Form 2 - Adding FieldSet example that is shown in the samples page: http://www.extjs.com/deploy/dev/examples/form/dynamic.html


/*
* ================ Form 2 =======================
*/
bd.createChild({tag: 'h2', html: 'Form 2 - Adding fieldsets'});

var fsf = new Ext.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
url:'save-form.php',
frame:true,
title: 'Simple Form with FieldSets',
bodyStyle:'padding:5px 5px 0',
width: 350,

items: [{
xtype:'fieldset',
checkboxToggle:true,
title: 'User Information',
autoHeight:true,
defaults: {width: 210},
defaultType: 'textfield',
collapsed: true,
items :[{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false
},{
fieldLabel: 'Last Name',
name: 'last'
},{
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}
]
},{
xtype:'fieldset',
title: 'Phone Number',
collapsible: true,
autoHeight:true,
defaults: {width: 210},
defaultType: 'textfield',
items :[{
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax'
}
]
}],

buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});

fsf.render(document.body);
'User Information' as you can see is more 'text' than a true checkbox label. Is there a way to make 'User Information' truly a label within the checkbox fieldset, so if the user were to click or select user information it would 'select' the box? I've tried boxlabel to no avail.

Thanks!
Yankee_gal

daanlib
18 Jan 2010, 10:37 AM
Use this in the example you are using as a replacement for you checkboxToggle an title properties:


checkboxToggle:{
tag: 'input',
type: 'checkbox',
name: this.checkboxName || this.id + '-checkbox',
id: this.checkboxName || this.id + '-checkbox'
},
title: '<label for="' + (this.checkboxName ? this.checkboxName : this.id+'-checkbox') + '>User Information</label>'

yankee_gal
19 Jan 2010, 5:23 AM
Thanks so much for your reply! That seemed to do it. Now I actually have multiple forms like that on that page and of course the checkbox logic was conflicting at first. Is there any reason the below won't work? Is it over simplifying? I've tested in IE7 and FF3 without any problems.



checkboxToggle:{
tag: 'input',
type: 'checkbox',
name: 'myCheck',
id: 'myCheck'
},
title: '<label for="myCheck">User Information</label>'

checkboxToggle:{
tag: 'input',
type: 'checkbox',
name: 'myCheck222',
id: 'myCheck222'
},
title: '<label for="myCheck222">My next Form</label>'

daanlib
19 Jan 2010, 6:16 AM
I see no reason for that code not to work. Just make sure your id is always unique.