[2.2] Checkbox/Radio cumulative bugfix

[Condor]

Some of these issues have been mentioned in other bugreports, but the implications are far more dangerous than I thought!

Most important issue:

On all browsers except IE: A click on a Checkbox or Radio fieldLabel causes the component to toggle/set checked, but the hidden input doesn't change!
On IE: Clicking a Checkbox or Radio fieldLabel does nothing.

Example:
-Click on the 'Checkbox' field label (checkbox looks checked)
-Click on the 'Radio 2' field label (radio 2 looks selected)
-Click on the Submit button
-The checkbox is unchecked and the first radio is checked!

Ext.onReady(function() {
	var form = new Ext.form.FormPanel({
		width: 200,
		items: [{
			xtype: 'checkbox',
			name: 'checkbox',
			fieldLabel: 'Checkbox'
		},{
			xtype: 'radio',
			name: 'radio',
			inputValue: '1',
			fieldLabel: 'Radio 1',
			checked: true
		},{
			xtype: 'radio',
			name: 'radio',
			inputValue: '2',
			fieldLabel: 'Radio 2'
		}],
		buttons: [{
			text: 'Submit',
			handler: function() {
				alert(Ext.encode(form.getForm().getValues()));
			}
		}],
		renderTo: document.body
	});
});

Other issues with checkboxes and radios:
2. On IE a disabled checkbox or radio doesn't look different (in fact all disabled images are not used).
3. The down state images are not used because the order of CSS rules is wrong.
4. The over/focused state images are not used for focus because the focusCls class is applied to the wrong element.
5. Radio tab and arrow-key handling is different than default.
6. Setting autoShow:true causes the hidden input to be visible.
7. IE 6 doesn't and FF3 and IE8b2 do show a focus rectangle on the label (in contrast to Ext 2.1).
8. Clicking on a checkbox/radio doesn't fire focus and blur events.
9. boxLabel is not sized correctly.

Suggested fix for all issues:
Note: This fix does not include validation support (see here).

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.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;
	},
	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);
	},
	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;
	}
});
Ext.override(Ext.form.Radio, {
	checkedCls: 'x-form-radio-checked'
});

with:

<style type="text/css">
.x-form-check-group .x-form-check-wrap,.x-form-radio-group .x-form-radio-wrap{height:auto;}
.ext-ie .x-form-check-group .x-form-check-wrap,.ext-ie .x-form-radio-group .x-form-radio-wrap{height:auto;}
.x-form-check-wrap,.x-form-radio-wrap{padding:1px 0 3px;line-height:18px;}
.ext-ie .x-form-check-wrap,.ext-ie .x-form-radio-wrap{padding-top:3px;}
.ext-strict .ext-ie7 .x-form-check-wrap,.ext-strict .ext-ie7 .x-form-radio-wrap{padding-bottom:1px;}
.x-form-check-wrap-inner,.x-form-radio-wrap-inner{display:inline;padding:0;}
.x-form-check,.x-form-radio{height:13px;width:13px;vertical-align:bottom;margin:2px 0;}
.ext-ie .x-form-check,.ext-ie .x-form-radio{margin-top:1px;}
.ext-strict .ext-ie7 .x-form-check,.ext-strict .ext-ie7 .x-form-radio{margin-bottom:4px;}
.ext-opera .x-form-check,.ext-opera .x-form-radio{margin-top:3px;}
.x-form-check-focus .x-form-check,.x-form-check-over .x-form-check,.x-form-check-focus .x-form-radio,.x-form-check-over .x-form-radio{background-position:-13px 0;}
.x-form-check-down .x-form-check,.x-form-check-down .x-form-radio{background-position:-26px 0;}
.x-item-disabled .x-form-check,.x-item-disabled .x-form-radio{background-position:-39px 0;}
.x-form-check-checked,.x-form-radio-checked{background-position:0 -13px;}
.x-form-check-focus .x-form-check-checked,.x-form-check-over .x-form-check-checked,.x-form-check-focus .x-form-radio-checked,.x-form-check-over .x-form-radio-checked{background-position:-13px -13px;}
.x-form-check-down .x-form-check-checked,.x-form-check-down .x-form-radio-checked{background-position:-26px -13px;}
.x-item-disabled .x-form-check-checked,.x-item-disabled .x-form-radio-checked{background-position:-39px -13px;}
.x-form-check-wrap-inner input,.x-form-radio-wrap-inner input{position:absolute;-ms-filter:"alpha(opacity=0)";filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}
</style>

Tested: IE 6/7/8b2, Firefox 3.0.3, Safari 3.1.2 and Opera 9.52 on Windows XP SP3.

ps.
To enhance the visibility of focused state it might be better to add special focused images that show a dotted line around the checkbox/radio.
Actually, IE8b2 does show a focus rectangle, but IMHO that is a bug in IE8!

[tsa]

Excellent! I didn't know the tabbing issue would be this easy to fix.

Thanks a lot, and I appreciate the other fixes as well.

[DeeZ]

Hi,

Thx a lot for these corrections ! When SVN will be updated with them ?

I often notice great solutions in the forum but no date of theirs availabilities in SVN ..

Any bugtracking system is planned to resolve this problematic ? It's nearly impossible to follow each thread and check solutions.

As a profesionnal framework (premium access and so on) you must think to reduce time to yours clients: global tools like roadmap, bugtracking and feature list must exists and not as a simple link to a wiki page or a forum !

I really like/love ExtSJ as a simple end user/geek but for in my job it's often too complicated to answer to this question: why choose ExtJS ? Great features on each new release but often big backwards compatibility ... And I talk only about pb between 2.1 to 2.2 !

Please create a real bugtracking system !

Thx,
DeeZ

PS: sorry for my bad english ...

[MaxT]

Condor: To enhance the visibility of focused state it might be better to add special focused images that show a dotted line around the checkbox/radio.

Won't this conflict with the browser dotted lines?

=================================================


Currently upgrading my checkboxes from 2.1 to 2.2 and have noted several issues.

I assume the general philosophy of this type of tab indexing is being used:
http://developer.mozilla.org/En/Key-..._DHTML_widgets

When I test tabbing of elements in IE7/Fx2 I get inconsistent dotted boxes around focused elements. This is visible in the Checkbox / Radio Groups test page.

E.g. in Fx2, Checkbox groups, the left edge of the dotted line is missing.
In IE7 the individual checkboxes only have the left edge of the checkbox dotted, in the groups there is nothing around the checkbox.

Are these issuse currently under consideration or already fixed?

Thanks,

Max

[Condor]

The current Ext 2.2 implementation of checkboxes and radios adds a tabindex to the wrapping div to make it focusable and hides the checbox/radio so it doesn't receive focus anymore.

There are several problems with this solution:
1. IE6 doesn't support setting tabindex on a div.
2. Clicking on the field label still focuses the hidden checkbox/radio.
3. The focus rectangle is only partially visible on certain browsers.

The fix from the first post reverts to the original behavior of checkboxes and radios. However, the default behaviour of some browsers is to only show a focus rectangle around the checkbox/radio, and not around the label.
The fix shows these focused checkboxes/radios with a focused/down image and no focus rectangle. That is why I'm proposing to create separate focused images that mimic a focus rectangle around the image.

[MaxT]

I just tried out your code but I'm not convinced this would be a better approach in the long run, even with a dashed box image for the checkbox. (With Fx2 and Opera I don't get a dashed box around the checkbox text, although I do with IE6/7.) I think the current version, with margin and/or padding set correctly to show the dashed boxes, would be better.

The MS docs say that tabindex is supported from IE5 onwards.
http://msdn.microsoft.com/en-us/libr...54(VS.85).aspx

Max

[hunkybill]

Hi,

I am using FF3 on a widescreen 1440x900 Thinkpad... with Linux.

No matter what I try, it seems that Ext 2.2 rendered radio buttons will not let me click the actual radio part of the radio button to toggle it on. Only clicking the label seems to set the field.

Using the various patches has not fixed the issue. The above patch for example really killed my Ext 2.2 forms... whereby I could not get radio buttons to work at all... I was pretty careful in trying the patch.. so now.. I am at a loss.. seems like my best bet might be to revert to an old Ext.ux.radiogroup widget???

Pity such a simple HTML concept is seemingly so damn hard to get right for most browsers... esp.. FF3 not even working... yikes...

[Condor]

So your FF3 doesn't respond to clicking on the checkbox/radio image.

1. Do you actually SEE an image (is Ext.BLANK_IMAGE_URL set correctly)?
2. Could you check with Firebug if the click handler is fired?

[hunkybill]

So your FF3 doesn't respond to clicking on the checkbox/radio image.

1. Do you actually SEE an image (is Ext.BLANK_IMAGE_URL set correctly)?

Yes...

2. Could you check with Firebug if the click handler is fired?

Click handler only fires when clicking the label...

It's like the container accepting clicks is too small, does not include the images standing in for the default radio buttons...

<div id="ext-gen523" class="x-form-radio-wrap-inner">
<img id="ext-gen526" src="javascripts/ext-2.0/resources/images/default/s.gif" class="x-form-radio">
<input tabindex="0" class="x-form-radio x-form-field" autocomplete="off" id="ext-comp-1105" name="ext-comp-1105" type="radio">
<label id="ext-gen525" for="ext-comp-1105" class="x-form-cb-label">foo radio</label>
</div>

hovering over the x-form-radio-wrap element highlights a full width container for the radio element, much much larger than the radio + label

hovering over the x-form-radio-wrap-inner element seems perfect size and include the radio and label

hovering over the label of course is just the label..

so it seems click handling is dedicated to the wrong element perhaps????

[leoman730]

I applied the patch that Condor provided above, and it solves my checkbox and radiobox issue.