Themed checkboxes/radios for Ext 3.0

[Dumbledore]

found it. For Ext 3.2. the bold lines in onRender must be added:

	onRender: function(ct, position){
		Ext.form.Checkbox.superclass.onRender.call(this, ct, position);
		if(this.inputValue !== undefined){
			this.el.dom.value = this.inputValue;
		}else{
			this.inputValue = this.el.dom.value;
		}
		this.innerWrap = this.el.wrap({
			cls: this.innerCls
		});
		this.wrap = this.innerWrap.wrap({
			cls: 'x-form-check-wrap'
		});
		if(this.boxLabel){
			this.labelEl = this.wrap.createChild({
				tag: 'label',
				htmlFor: this.el.id,
				cls: 'x-form-cb-label',
				html: this.boxLabel
			});
		}else{
			this.innerWrap.addClass('x-form-check-no-label');
		}
		
        // Need to repaint for IE, otherwise positioning is broken
        if(Ext.isIE){
            this.wrap.repaint();
        }
		
        this.resizeEl = this.positionEl = this.wrap;
	},

[WixSL]

Could anybody find a real solution for themeing checkboxes?
I tried all of this and the checkboxes don't even appear (FF 3.6.3 / Opera 10.53 - Windows 2000).
I'm useing Ext v3.2.1

[arian10daddy]

Hi All,

I am not able to get the radiogroup working after my upgrade from Ext 2.2 to Ext 3.2.1...
Also, everything inside my viewport is coming to the top left portion of the screen. I've tried the above options but that doesn't work probably because it refers to radio and not radiogroup. Could you folks please help me in this regard?

Varun

[Dumbledore]

It seems there is a problem when using this with ext3.3. The overwrite will return value/undefined by getValue() the checkbox in ext will return true/false.
This is realy a problem when using Ext.form.BasicForm.updateRecord()!

A solution is not to overwrite the getValue()... or is there a better way?

[Condor]

You could specify inputValue:true or you could make getValue return getRawValue directly.

[Dumbledore]

i try inputVlaue: true, but when the checkbox is not checked the value is undefined which won´t work with Ext.form.BasicForm.updateRecord().

Perhaps so:

    getValue: function(){
		return this.getRawValue() ? this.inputValue : this.getRawValue();
	},

[Condor]

If you really just want a true/false value from getValue then you only need:

getValue: function(){
  return this.getRawValue();
},

[cyberal]

Hi,

Thanks Condor for this good works .

In my project for checkbox I need to change the image of the checkbox, to do this I have changed the code :

Ext.override(Ext.form.Checkbox, {
	checked: undefined,
	actionMode: 'wrap',

	innerCls: 'x-form-checkbox-inner',
	overCls: 'x-form-check-over',
	downCls: 'x-form-check-down',
	focusCls: 'x-form-check-focus',
	checkedCls: 'x-form-check-checked',
	
	onResize: function(){
		Ext.form.Checkbox.superclass.onResize.apply(this, arguments);
		if(!this.boxLabel){
			this.innerWrap.alignTo(this.wrap, 'c-c');
		}
	},
	initEvents: function(){
		Ext.form.Checkbox.superclass.initEvents.call(this);
		this.mon(this.el, {
			click: this.onClick,
			change: this.onClick,
			mouseenter: this.onMouseEnter,
			mouseleave: this.onMouseLeave,
			mousedown: this.onMouseDown,
			mouseup: this.onMouseUp,
			scope: this
		});
	},
	onRender: function(ct, position){
		Ext.form.Checkbox.superclass.onRender.call(this, ct, position);
		if(this.inputValue !== undefined){
			this.el.dom.value = this.inputValue;
		}else{
			this.inputValue = this.el.dom.value;
		}
		this.innerWrap = this.el.wrap({
			cls: this.innerCls
		});
		this.wrap = this.innerWrap.wrap({
			cls: 'x-form-check-wrap'
		});
		if(this.boxLabel){
			this.labelEl = this.wrap.createChild({
				tag: 'label',
				htmlFor: this.el.id,
				cls: 'x-form-cb-label',
				html: this.boxLabel
			});
		}else {
			this.innerWrap.addClass('x-form-check-no-label');
		}
		
		// Need to repaint for IE, otherwise positioning is broken
        if(Ext.isIE){
            this.wrap.repaint();
        }
		
        this.resizeEl = this.positionEl = this.wrap;
	},
	initValue: function(){
		if(this.checked !== undefined){
			this.setValue(this.checked);
		}else{
			if(this.value !== undefined){
				this.setValue(this.value);
			}
			this.checked = this.el.dom.checked;
		}
		this.originalValue = this.getValue();
	},
	getRawValue: function(){
		return this.rendered ? this.el.dom.checked : this.checked;
	},
	getValue: function(){
		return this.getRawValue() ? this.inputValue : undefined;
	},
	onClick: function(){
		if(Ext.isSafari){
			this.focus();
		}
		if(this.el.dom.checked != this.checked){
			this.setValue(this.el.dom.checked);
		}
	},
	setValue: function(v){
		this.checked = typeof v == 'boolean' ? v : v == this.inputValue;
		if(this.rendered){
			this.el.dom.checked = this.checked;
			this.el.dom.defaultChecked = this.checked;
			this.innerWrap[this.checked ? 'addClass' : 'removeClass'](this.checkedCls);
			this.validate();
		}
		this.fireEvent('check', this, this.checked);
		if(this.handler){
			this.handler.call(this.scope || this, this, this.checked);
		}
		return this;
	},
	onMouseEnter: function(){
		this.wrap.addClass(this.overCls);
	},
	onMouseLeave: function(){
		this.wrap.removeClass(this.overCls);
	},
	onMouseDown: function(){
		this.wrap.addClass(this.downCls);
	},
	onMouseUp: function(){
		this.wrap.removeClass(this.downCls);
	},
	onFocus: function(){
		Ext.form.Checkbox.superclass.onFocus.call(this);
		this.wrap.addClass(this.focusCls);
	},
	onBlur: function(){
		Ext.form.Checkbox.superclass.onBlur.call(this);
		this.wrap.removeClass(this.focusCls);
	}
});
Ext.override(Ext.form.Radio, {
	innerCls: 'x-form-radio-inner',
	onClick: Ext.form.Radio.superclass.onClick,
	setValue: function(v){
		Ext.form.Radio.superclass.setValue.call(this, v);
		if(this.rendered && this.checked){
			var p = this.el.up('form') || Ext.getBody(),
				els = p.select('input[name=' + this.el.dom.name + ']'),
				id = this.el.dom.id;
			els.each(function(el){
				if(el.dom.id != id){
					Ext.getCmp(el.dom.id).setValue(false);
				}
			});
		}
		return this;
	}
});

I think it is a good idea to allow the user to change the CSS classes.