[3.0] An "always has value" checkbox

[prometheus]

This component deprecated now and no longer supported by me!
I made a much better replacement, see [3.0] Themable Checkbox replacement with 3 working modes (http://extjs.com/forum/showthread.php?t=72504) - that implements a working mode named 'switch' to work like this code above.
________________________________________________________________________________________
This is a small upgrade based on Ext checkbox control, only differs on that mine has always has value. You can set checked and unchecked value by valueOn and valueOff config values, defaults are '1' and '0' (strings). If not works on loaded forms, use the patch found at the end of post.
There are no codeside comments, you can use this like a normal checkbox component, you can create with new or with xtype 'sm_checkbox'.


Ext.namespace('Ext.sm.Form');

Ext.sm.Form.Checkbox = Ext.extend(Ext.form.Checkbox, {
valueOn: '1',
valueOff: '0',

initComponent: function()
{
Ext.sm.Form.Checkbox.superclass.initComponent.call(this);

var n = this.name;
delete this.name;

this.hiddenField = new Ext.form.Hidden({
name: n,
value: this.checked? this.valueOn : this.valueOff
});
},

onRender: function(ct, position)
{
this.ownerCt.add(this.hiddenField);
this.hiddenField.render(this.ownerCt.el);
Ext.sm.Form.Checkbox.superclass.onRender.call(this, ct, position);
this.hiddenField.on('change', function(f,n){this.setValue(n);}.createDelegate(this));
},

setValue : function(v){
this.checked = (v === true || v === 'true' || v == '1' || String(v).toLowerCase() == 'on');
var hv = this.checked? this.valueOn : this.valueOff;
if(this.el && this.el.dom){
this.el.dom.checked = this.checked;
this.el.dom.defaultChecked = this.checked;
}
if (this.hiddenField && this.hiddenField.getValue() != hv)
{
this.hiddenField.setValue(hv);
}
this.fireEvent("check", this, this.checked);
return this;
}
});

Ext.reg('sm_checkbox', Ext.sm.Form.Checkbox);

Patch for hidded field onchange handler (optional, checking recommended on your version of Ext):

Ext.override(Ext.form.Hidden, {
setValue: function(v)
{
console.log(333);
var o = this.getValue();
Ext.form.Hidden.superclass.setValue.call(this, v);
this.fireEvent('change', this, this.getValue(), o);
return this;
}
});

Good luck! :)

[mschwartz]

How does it differ from this?

http://extjs.com/forum/showthread.php?t=25924

[prometheus]

How does it differ from this?

http://extjs.com/forum/showthread.php?t=25924

Saki`s one is more complex than mine if I remembered that, and another different is that mine dedicated to Ext 3.0, Saki`s to Ext 2 or 2.2 or I don`t know :)