View Full Version : Plugin: Ext.ux.form.SubmitFalse for Checkbox submission

12 Oct 2010, 1:48 PM
Been coding in ExtJS for a few years now, but just recently found myself at a company who actually encourages participation with a community.

As many of you are probably already aware, the base HTML checkbox will only submit values when checked and submits nothing when unchecked. Sometimes you just want it to submit checked or not. Currently the best solution for this in Ext is the xcheckbox extension, but if you don't want to go all the way to a new checkbox and don't mind the old and ugly checkbox, this is a quick little plugin I threw together to handle the hidden field methodology.

tl;dr: this plugin will allow your checkboxes to submit no matter what their checked state.


Ext.ux.form.SubmitFalse = Ext.extend(function(config){
Ext.apply(this, config);
uncheckedValue: 'off',

var originalSetValue = component.setValue;
var negValue = this.uncheckedValue;

var buildInputElement = function(el, name){
return Ext.DomHelper.insertAfter(el, {
tag: 'input',
type: 'hidden',
value: negValue.toString(),
name: name
}, true);

Ext.apply(component, {
setValue: function(){
originalSetValue.apply(this, arguments);
if (this.checked) {
if (this.uncheckedHiddenElement != null) {
this.uncheckedHiddenElement = null;
else {
this.uncheckedHiddenElement = buildInputElement(this.el, this.getName());

{xtype: 'checkbox', boxLabel: 'Example', name: 'examp', inputValue: '1', plugins:[new Ext.ux.form.SubmitFalse({uncheckedValue: '0'})]}methodology shamelessly borrowed from:

I make no claims on the code, nor offer any support if it doesn't work (though if you ask nice, I might try to help).

Edit: Looks like in ext 3.3, checkbox.setValue is always called after render, so we can reduce this down to a single function override. (note: in Ext 3.2 an earlier, I believe you will need to override onRender with the same logic.)