Ext.ux.form.RCheckbox – Valor de envio configurável

Como sabemos por padrão o checkbox envia valor se foi marcado, se não marcado foi ele não envia nada.
Mas… Uma vez peguei um UX do site do Saki e um tempo depois modifiquei ele pra ficar melhor e menor. Claro, mudei o nome, afinal não é mais o mesmo UX, mas os créditos ao Saki continuam.

Componente:

/**
  * Ext.ux.form.RCheckbox - checkbox com valor de submit configurável
  *
  * @author  Rodrigo Krummenauer do Nascimento
  * @version 0.0.1
  * @date    14/01/2010
  *
  * @obs Testado na versão 3.0.0 da biblioteca ExtJS. UX inspirado no UX
  * XCheckbox de autoria de Ing. Jozef Sakalos.
  *
  * @license Open Source LGPL 3.0 license.
  * License details: http://www.gnu.org/licenses/lgpl.html
  */

/**
  * @class Ext.ux.RCheckbox
  * @extends Ext.form.Checkbox
  */
Ext.ns('Ext.ux.form');
Ext.ux.form.RCheckbox = Ext.extend(Ext.form.Checkbox, {
	uncheckedValue:false,
	checkedValue  :true,

	onRender:function() {
		Ext.ux.form.RCheckbox.superclass.onRender.apply(this, arguments);

		//Cria um campo hidden para conter o valor a ser enviado
		this.hiddenField = this.wrap.insertFirst({tag:'input', type:'hidden'});
		//Atribui o nome do checkbox ao campo hidden
		this.hiddenField.dom.name = this.el.dom.name;
		//Retira o campo nome do checkbox para enviar apenas o campo hidden
		this.el.dom.name = '';

		this.updateHidden();
	},
	setValue:function(v) {
		Ext.ux.form.RCheckbox.superclass.setValue.apply(this, arguments);
		this.updateHidden();
	},
	updateHidden:function(v) {
		if(this.hiddenField) {
			this.hiddenField.dom.value = this.checked ? this.checkedValue : this.uncheckedValue;
		}
	}
});
Ext.reg('rcheckbox', Ext.ux.form.RCheckbox);

Como vocês podem perceber o valor de envio é configurável, pode ser alterado diretamente no UX o que afeta todos os RCheckbox criados ou podem ser definidos em cada componente criado.

Exemplo:

Ext.onReady(function(){
	Ext.form.FormPanel.prototype.bodyStyle = 'padding:10px';
	Ext.ux.form.RCheckbox.prototype.hideLabel = true;

	var win = new Ext.Window({
		height: 210,
		width: 600,
		layout: 'fit',
		title: 'Ext.ux.form.RCheckbox',
		items:[{
			xtype: 'form',
			labelWidth: 60,
			layout: 'hbox',
			items: [{
				xtype: 'fieldset',
				title: 'Linguegens',
				flex: 1,
				items: [{
					xtype: 'rcheckbox',
					checked: true,
					boxLabel: 'PHP',
					name: 'php'
				},{
					xtype: 'rcheckbox',
					boxLabel: 'ASP',
					name: 'asp'
				},{
					xtype: 'rcheckbox',
					boxLabel: 'JSP',
					name: 'jsp'
				}]
			},{
				xtype: 'fieldset',
				title: 'Banco de Dados',
				flex: 1,
				items: [{
					xtype: 'rcheckbox',
					checked: true,
					boxLabel: 'PostgreSQL',
					name: 'postgresql'
				},{
					xtype: 'rcheckbox',
					boxLabel: 'FireBird',
					name: 'firebird'
				},{
					xtype: 'rcheckbox',
					boxLabel: 'Oracle',
					name: 'oracle'
				}]
			},{
				xtype: 'fieldset',
				title: 'Browsers',
				flex: 1,
				items: [{
					xtype: 'rcheckbox',
					checked: true,
					uncheckedValue: 'off',
					checkedValue: 'on',
					boxLabel: 'Firefox',
					name: 'firefox'
				},{
					xtype: 'rcheckbox',
					checked: true,
					uncheckedValue: 'off',
					checkedValue: 'on',
					boxLabel: 'Chrome',
					name: 'chrome'
				},{
					xtype: 'rcheckbox',
					uncheckedValue: 'off',
					checkedValue: 'on',
					boxLabel: 'IEca',
					name: 'ieca'
				}]
			}]
		}],
		buttons:[{
			text:'Salvar',
			handler: function(){
				alert(Ext.encode(win.items.items[0].getForm().getValues()))
				win.items.items[0].getForm().submit({url:'123.php'})
			}
		},{
			text:'Cancelar'
		}]
	})
	win.show();
})

Exmeplo Online

ZIP Com os Arquivos

• 08/01/2010 -- Override GridPanel/ColumnModel: Colunas Checkbox (0)
• 17/02/2010 -- Criando um CRUD usando um GRID e um FORM em 3 Partes (0)
• 12/02/2010 -- Gadget do fórum Brasileiro de ExtJS para Win Vista/7 (0)
• 10/02/2010 -- Temas bem coloridos pra ExtJS (0)
• 27/11/2009 -- Ext.ux.StoreGroup – Carregando Dependências (0)
• 21/12/2010 -- Novidades, mudanças e um novo ano (0)
• 23/03/2010 -- ScreenCast – Instalando o ExtJS (0)
• 18/02/2010 -- ScreenCast – Estudo sobre Layouts(Fit, HBox e VBox) (0)
• 16/02/2010 -- Comparação de frameworks JavaScript (0)
• 08/02/2010 -- Vírgulas, um problema constante em JavaScript (0)