PDA

View Full Version : Extjs fieldset checkboxToggle checkbox value (checked/unchecked)dynamically



javapurna
20 Sep 2013, 5:52 AM
hi ,
how to change fieldset checkboxToggle checkbox checked/unchecked dynamically .. i e

my fieldset having checkbox group (dynamically created ). if any checkbox group checkbox is checked ,i want to check fieldset checkboxToggle checkbox . i am trying to setValue(true) to fieldset but no useless.




{
xtype: 'fieldset',
title: "info"
checkboxToggle: true,
collapsible: false,
collapsed: false,
itemId:"Information",
checkboxName: 'contactInformation',
hidden: true,
defaults: {
labelWidth: 89,
anchor: '100%',
},
items: [{




xtype: 'checkboxgroup',
columns: 3,
items: contactInfoArray // DYNAMIC ARRAY OF CHECKBOXES




}],
listeners: {
'beforecollapse': function (e, eOpt) {
e.items.each(function (i) {
i.items.each(function (i) {
i.setValue(false);
});
});
return false; // this will avoid collapse of the field set
},
'beforeexpand': function (e, eOpt) {
e.items.each(function (i) {
i.items.each(function (j) {
j.setValue(true);
});
});
return false; // this will avoid the default expand behaviour
}
}


}




IF nay one checkbox group checkbox selected ,the fieldset toggle checkbox checkbox select .other wise 4591845919

slemmon
2 Oct 2013, 9:50 AM
If you check / uncheck the checkbox set by checkboxToggle you'll expand / collapse the fieldset. I take it that's not what you want, though, correct?

*Also, toggle() or collapse() / expand() will check the box programmatically.

I suspect what you are wanting to do is have a checkbox input field in the fieldset title and using setTitle() change the title to include either a checked or unchecked checkbox (Or if you want the checkbox to look like the ExtJS checkbox field you can inspect the checkboxfield and see how it uses the images used to represent checked / unchecked).



Ext.create('Ext.form.Panel', {
tbar: [{
text: 'Check / Uncheck checkbox fieldset',
enableToggle: true,
toggleHandler: function (btn, pressed) {
btn.up('form').down('#checkboxToggle').toggle();
}
}],
title: 'Simple Form with FieldSets',
labelWidth: 75, // label settings here cascade unless overridden
url: 'save-form.php',
frame: true,
bodyStyle: 'padding:5px 5px 0',
width: 550,
renderTo: Ext.getBody(),
layout: 'column', // arrange fieldsets side by side
items: [{
// Fieldset in Column 1 - collapsible via toggle button
xtype:'fieldset',
columnWidth: 0.5,
title: 'Fieldset 1',
collapsible: true,
defaultType: 'textfield',
defaults: {anchor: '100%'},
layout: 'anchor',
items :[{
fieldLabel: 'Field 1',
name: 'field1'
}, {
fieldLabel: 'Field 2',
name: 'field2'
}]
}, {
// Fieldset in Column 2 - collapsible via checkbox, collapsed by default, contains a panel
xtype:'fieldset',
itemId: 'checkboxToggle',
title: 'Show Panel', // title or checkboxToggle creates fieldset header
columnWidth: 0.5,
checkboxToggle: true,
collapsed: true, // fieldset initially collapsed
layout:'anchor',
items :[{
xtype: 'panel',
anchor: '100%',
title: 'Panel inside a fieldset',
frame: true,
height: 52
}]
}]
});