ExtJS -- submit selected checkbox values as string - extjs

Question

I have a checkbox group component and each checkbox value upon form submit is passed as a separate parameter like so:
mycheckboxgroup: val1
mycheckboxgroup:val2
mycheckboxgroup:val3
How can I instead submit all checkbox group values in a comma separated string?
mycheckboxgroup: val1, val2, val3
I tried using the getSubmitData method but that did not work. The values are still submitted in separate params.
Here is a snippet of my CheckBoxGroup class:
Ext.define("MyApp.view.form.field.CheckboxGroup",{
extend:"Ext.form.CheckboxGroup",
vertical:true,
columns:2,
getSubmitData:function(){
var fldNm = this.name;
return this.getValue()[fldNm].toString();
},
initComponent:function(){
.....
.....
this.callParent(arguments);
}
});
I am using Ext 6.0.2
Thanks

Answer 1

The problem is that your form, upon submission, will query the checkboxes, not the group as a whole.
You can, however, create a custom component with non-persistent checkboxes and a hidden field that aggregates the value. It may need some fine tuning, but something like this:
Ext.define("MyApp.ux.CheckboxGroup",{
extend:"Ext.form.CheckboxGroup",
xtype:'mycheckboxgroup',
initComponent:function() {
var me = this,
hf = Ext.widget({xtype:'hiddenfield',name:me.name});
me.callParent(arguments);
var checkboxes = me.query('checkbox'),
onChange = function(cb, nv) {
var arr = [];
Ext.each(checkboxes,function(item) {
if(item.checked) arr.push(item.inputValue);
});
hf.setValue(arr.join(', '));
};
Ext.each(checkboxes, function(item) {
console.log(item);
item.on('change',onChange);
item.submitValue = false; // do not submit the checkbox value
})
me.add(hf);
}
});
Relevant fiddle: https://fiddle.sencha.com/#view/editor&fiddle/1mim