[2.2] Checkbox/Radio cumulative bugfix

[jit]

Thanks for the fix!

Anyone know if there's an ETA for a bug fix version of Ext 2.2?

- Jit

[piston]

I'm hoping other noobs have same question as I do: How do you implement that fix? Do you add the bold text somewhere? What do you do with the stylesheet?

[Condor]

I'm hoping other noobs have same question as I do: How do you implement that fix? Do you add the bold text somewhere? What do you do with the stylesheet?

Most peope create 2 files (fixes.css and fixes.js) and put in all required css and js overrides.
Next, you include fixes.css and fixes.js after ext-all.css and ext-all.js in your HTML page.

(don't try to edit ext-all.css or ext-all.js, because it complicates upgrading Ext JS to a newer version)

[Condor]

Here is a patch for those who also need Checkbox/Radio validation:

Ext.override(Ext.form.Field, {
	markInvalid : function(msg){
		if(!this.rendered || this.preventMark){
			return;
		}
		var markEl = this.markEl || this.el;
		markEl.addClass(this.invalidClass);
		msg = msg || this.invalidText;
		switch(this.msgTarget){
			case 'qtip':
				markEl.dom.qtip = msg;
				markEl.dom.qclass = 'x-form-invalid-tip';
				if(Ext.QuickTips){
					Ext.QuickTips.enable();
				}
				break;
			case 'title':
				markEl.dom.title = msg;
				break;
			case 'under':
				if(!this.errorEl){
					var elp = this.getErrorCt();
					if(!elp){
						markEl.dom.title = msg;
						break;
					}
					this.errorEl = elp.createChild({cls:'x-form-invalid-msg'});
					this.errorEl.setWidth(elp.getWidth(true)-20);
				}
				this.errorEl.update(msg);
				Ext.form.Field.msgFx[this.msgFx].show(this.errorEl, this);
				break;
			case 'side':
				if(!this.errorIcon){
					var elp = this.getErrorCt();
					if(!elp){
						markEl.dom.title = msg;
						break;
					}
					this.errorIcon = elp.createChild({cls:'x-form-invalid-icon'});
				}
				this.alignErrorIcon();
				this.errorIcon.dom.qtip = msg;
				this.errorIcon.dom.qclass = 'x-form-invalid-tip';
				this.errorIcon.show();
				this.on('resize', this.alignErrorIcon, this);
				break;
			default:
				var t = Ext.getDom(this.msgTarget);
				t.innerHTML = msg;
				t.style.display = this.msgDisplay;
				break;
		}
		this.fireEvent('invalid', this, msg);
	},
	clearInvalid : function(){
		if(!this.rendered || this.preventMark){
			return;
		}
		var markEl = this.markEl || this.el;
		markEl.removeClass(this.invalidClass);
		switch(this.msgTarget){
			case 'qtip':
				markEl.dom.qtip = '';
				break;
			case 'title':
				markEl.dom.title = '';
				break;
			case 'under':
				if(this.errorEl){
					Ext.form.Field.msgFx[this.msgFx].hide(this.errorEl, this);
				}else{
					markEl.dom.title = '';
				}
				break;
			case 'side':
				if(this.errorIcon){
					this.errorIcon.dom.qtip = '';
					this.errorIcon.hide();
					this.un('resize', this.alignErrorIcon, this);
				}else{
					markEl.dom.title = '';
				}
				break;
			default:
				var t = Ext.getDom(this.msgTarget);
				t.innerHTML = '';
				t.style.display = 'none';
				break;
		}
		this.fireEvent('valid', this);
	},
	alignErrorIcon : function(){
		this.errorIcon.alignTo(this.markEl || this.el, 'tl-tr', [2, 0]);
	}
});
Ext.override(Ext.form.Checkbox, {
	onRender: function(ct, position){
		Ext.form.Checkbox.superclass.onRender.call(this, ct, position);
		if(this.inputValue !== undefined){
			this.el.dom.value = this.inputValue;
		}
		this.el.removeClass(this.baseCls);
		//this.el.addClass('x-hidden');
		this.innerWrap = this.el.wrap({
			//tabIndex: this.tabIndex,
			cls: this.baseCls+'-wrap-inner'
		});
		this.wrap = this.innerWrap.wrap({cls: this.baseCls+'-wrap'});
		this.imageEl = this.innerWrap.createChild({
			tag: 'img',
			src: Ext.BLANK_IMAGE_URL,
			cls: this.baseCls
		});
		if(this.boxLabel){
			this.labelEl = this.innerWrap.createChild({
				tag: 'label',
				htmlFor: this.el.id,
				cls: 'x-form-cb-label',
				html: this.boxLabel
			});
		}
		//this.imageEl = this.innerWrap.createChild({
			//tag: 'img',
			//src: Ext.BLANK_IMAGE_URL,
			//cls: this.baseCls
		//}, this.el);
		if(this.checked){
			this.setValue(true);
		}else{
			this.checked = this.el.dom.checked;
		}
		this.originalValue = this.checked;
		this.markEl = this.innerWrap;
	},
	afterRender: function(){
		Ext.form.Checkbox.superclass.afterRender.call(this);
		//this.wrap[this.checked ? 'addClass' : 'removeClass'](this.checkedCls);
		this.imageEl[this.checked ? 'addClass' : 'removeClass'](this.checkedCls);
	},
	initCheckEvents: function(){
		//this.innerWrap.removeAllListeners();
		this.innerWrap.addClassOnOver(this.overCls);
		this.innerWrap.addClassOnClick(this.mouseDownCls);
		this.innerWrap.on('click', this.onClick, this);
		//this.innerWrap.on('keyup', this.onKeyUp, this);
		if(this.validationEvent !== false){
			this.el.on(this.validationEvent, this.validate, this, {buffer: this.validationDelay});
		}
	},
	onFocus: function(e) {
		Ext.form.Checkbox.superclass.onFocus.call(this, e);
		//this.el.addClass(this.focusCls);
		this.innerWrap.addClass(this.focusCls);
	},
	onBlur: function(e) {
		Ext.form.Checkbox.superclass.onBlur.call(this, e);
		//this.el.removeClass(this.focusCls);
		this.innerWrap.removeClass(this.focusCls);
	},
	onClick: function(e){
		if (e.getTarget().htmlFor != this.el.dom.id) {
			if (e.getTarget() != this.el.dom) {
				this.el.focus();
			}
			if (!this.disabled && !this.readOnly) {
				this.toggleValue();
			}
		}
		//e.stopEvent();
	},
	onEnable: Ext.form.Checkbox.superclass.onEnable,
	onDisable: Ext.form.Checkbox.superclass.onDisable,
	onKeyUp: undefined,
	setValue: function(v) {
		var checked = this.checked;
		this.checked = (v === true || v === 'true' || v == '1' || String(v).toLowerCase() == 'on');
		if(this.rendered){
			this.el.dom.checked = this.checked;
			this.el.dom.defaultChecked = this.checked;
			//this.wrap[this.checked ? 'addClass' : 'removeClass'](this.checkedCls);
			this.imageEl[this.checked ? 'addClass' : 'removeClass'](this.checkedCls);
		}
		if(checked != this.checked){
			this.fireEvent("check", this, this.checked);
			if(this.handler){
				this.handler.call(this.scope || this, this, this.checked);
			}
		}
	},
	getResizeEl: function() {
		//if(!this.resizeEl){
			//this.resizeEl = Ext.isSafari ? this.wrap : (this.wrap.up('.x-form-element', 5) || this.wrap);
		//}
		//return this.resizeEl;
		return this.wrap;
	},
	markInvalid: Ext.form.Checkbox.superclass.markInvalid,
	clearInvalid: Ext.form.Checkbox.superclass.clearInvalid,
	validationEvent: 'click',
	validateOnBlur: false,
	validateValue: function(value){
		if(this.vtype){
			var vt = Ext.form.VTypes;
			if(!vt[this.vtype](value, this)){
				this.markInvalid(this.vtypeText || vt[this.vtype +'Text']);
				return false;
			}
		}
		if(typeof this.validator == "function"){
			var msg = this.validator(value);
			if(msg !== true){
				this.markInvalid(msg);
				return false;
			}
		}
		return true;
	}
});
Ext.override(Ext.form.Radio, {
	checkedCls: 'x-form-radio-checked',
	markInvalid: Ext.form.Radio.superclass.markInvalid,
	clearInvalid: Ext.form.Radio.superclass.clearInvalid
});

(CSS from original post also needs to be used)

msgTarget:'qtip' only works partially, but 'title', 'side' and 'under' work correctly.

[dan1son]

Condor,

Is this validation fix going into the codebase for 2.2.1 or whatever the next version turns out to be or do I need to patch my code to get this feature?


Dan

[MaxT]

Condor, I've been testing out this code once more. One thing I notice is that when the fieldLabel is clicked to toggle the checkbox it first flashes a grey image before the blue one. I don't get the grey image flash when clicking on the boxLabel to toggle the check state.

Has anyone else noticed this, or have I done something else to break the correct behaviour? It happens consistently for me with Fx2, Fx3, IE7.

Max

[jack.slocum]

2.2.1 will revert checkboxes back to their original 2.0 implementation. Native checkboxes and radios should be used to ensure cross platform look and feel is consistent.

[Condor]

2.2.1 will revert checkboxes back to their original 2.0 implementation. Native checkboxes and radios should be used to ensure cross platform look and feel is consistent.

That's too bad. Styled checkboxes and radios were very high on the requested feature list back in the Ext 2.0 days.

ps. You can't claim consistent cross platform look and feel when using native checkboxes/radios! Don't you mean platform specific look and feel?

[jahman]

Hello everyone,

I need help. I have a group of checkboxes. I want to implement validation on them. I have done it in way, that if a child is selected, it know his father and can prove if his father is selected, it gets its father selected as well. But if in turn the father is deselected, he should try and contact his children, although he doesn't his children.

I am trying to get all items of the checkboxgroup, iterate over them and look for items with the father id as parent. Can any body help me. My code is below. Thanks

[code]

Ext.onReady(function(){

Ext.QuickTips.init();

// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';

var url = 'http://'+host+'/cake/modules/getAllModules';
var root = 'modules';
var results = 'results';

Ext.Ajax.request({
waitMsg: 'Daten werden geladen',
methode: 'POST',
url: url,
params: {},
success: function(result, request) {
var jsonData = Ext.decode(result.responseText);
var array = [
{name: 'id'},
{name: 'bezeichnung', mapping: 'bezeichnung'},
{name: 'beschreibung', mapping: 'beschreibung'},
{name: 'typ', mapping: 'typ'},
{name: 'seriennummer', mapping: 'seriennummer'},
{name: 'obermodule', mapping: 'module_id'}
];


var cm = new Ext.grid.ColumnModel([
{header: "ID", dataIndex: 'id', width: 100, hidden: true},
{header: "Name 1", dataIndex: 'bezeichnung', width: 200},
{header: "Name 2", dataIndex: 'beschreibung', width: 120},
{header: "Name 3", dataIndex: 'typ', width: 120},
{header: "Name 4", dataIndex: 'seriennummer', width: 120},
{header: "Name 5", dataIndex: 'obermodule', width: 120},

]);

var store = getStore(url, array, results, root, true);
var storeWithRange = getStore(url, array, results, root, true, 10);

//Here's where we define our datagrid.
//We have to specify our dataStore and our columnModel.
var grid = new Ext.grid.GridPanel({
ds: getStore(url, array, results, root),
cm: cm,
stripeRows: true,
height: 350,
width: 350,
title: 'Data Grid',
hidden: true
});

grid.render('contents');

var storeX = getArray(jsonData);

Ext.override(Ext.form.Checkbox, {
onClick: function(e){
var isChecked = this.checked;
var id = this.id;
var wert = "baugruppe_"+this.parent;
if(!isChecked){
if (this.parent == 0) {
this.setValue('on');
}
else{
if (Ext.getCmp(wert).checked) {
this.setValue('on');
}
else {
Ext.MessageBox.alert('Confirm','Diese Unterbaugruppe kann nur gew

[mysticav]

I applied the patch, but now, I can't check any radiobox. if I click the radio, nothing happens (it is not checked).