[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). (http://extjs.com/forum/showthread.php?t=44827)
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. (http://extjs.com/forum/showthread.php?t=44499)
6. Setting autoShow:true causes the hidden input to be visible. (http://extjs.com/forum/showthread.php?t=44566)
7. IE 6 doesn't and FF3 and IE8b2 do show a focus rectangle on the label (in contrast to Ext 2.1). (http://extjs.com/forum/showthread.php?p=204788)
8. Clicking on a checkbox/radio doesn't fire focus and blur events. (http://extjs.com/forum/showthread.php?t=47560)
9. boxLabel is not sized correctly. (http://extjs.com/forum/showthread.php?t=44475)

Suggested fix for all issues:
Note: This fix does not include validation support (see here (http://extjs.com/forum/showthread.php?p=238498#post238498)).


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-navigable_custom_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/library/ms534654(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.

[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).

[Condor]

Radios need to have an id, otherwise they won't work.
Could show post the code of how you create the radiobuttons?

[mysticav]

Actually you found the problem without looking the code, nice condor sight!

Yes, the radios didn't have ids.

Now it works. I Thanks!

[lionheart33806]

Hi all,
When i uncheck with the patch, the value stills like checked.
Any idea ?

Thanks in advance

[Condor]

Can you post an example showing this problem?

(and mention the OS and browser + version you are using)

[lionheart33806]

My problem is again with my "very complicated" form with version 2.2 and Fx3/IE6 :
http://extjs.com/forum/showthread.php?t=54845

[lionheart33806]

Ok, the problem is with my js :


parametres = rechAvancd.getForm().getValues();
...
grilleAffsResultats.store.baseParams = Ext.apply(grilleAffsResultats.store.baseParams || {}, parametres);When checked, I have the values to baseParams.
When I uncheck, there is no data from getValues, so the last value of the checkbox still in baseParams when "apply" ...

[Condor]

That is how checkboxes work: A checked input will post it's value, an unchecked value will post no value.

jsakalos wrote an XCheckbox user extension (http://extjs.com/forum/showthread.php?t=25924) to solve this problem (but it might not be compatible with this fix).

[mdm-adph]

Radios need to have an id, otherwise they won't work.
Could show post the code of how you create the radiobuttons?

Is the generated id not enough?

EDIT: No, I got it to work, but only with "under." :-?

[mdm-adph]

I'd also like to state that version 2.2.1 breaks this behaviour. I thought it might have been because it was rolled into 2.2.1, but even after removing it from my overrides file, radio buttons still don't allow themselves to be checked. Anyone else seeing this?

[beebop]

I noticed the bug with the label today when using a checkbox to indicate if a news is online or not.
I have applied the 2 js fixes (value + validation) and the css fix. The value bug seems to be fixed, but when I click to make the news online, the box seems checked only when it has the focus. As soon as it lose the focus, the box seems unchecked again, even if its value is correct (to true).
Any idea how to resolve the problem ?

PS : I'm using ExtJS 2.2.1

[Condor]

Can you post an example?

(this could be an incompatibility with Ext 2.2.1 - I created this override for Ext 2.2)

[beebop]

I rectify : I noticed the display problem only appends when using xtheme-slate.css (which replace standard checkbox by images).
It works perfectly when using default theme.

[thirstypixel]

There is an issue with this fix in a grid. It seems like the image dose not get positioned above/behind the hidden input. any suggestions? Thank you!

Awesome fix btw!

[thirstypixel]

I found a temporary fix for my dilemma by changing the input element's alignTo function so that it will align the image as well:


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
});
this.el.img = this.imageEl;
this.el.alignTo = function(element, position, offsets, animate){
var xy = this.getAlignToXY(element, position, offsets);
this.setXY(xy, this.preanim(arguments, 3));
this.img.alignTo(element, position, offsets, animate);
return this;
};
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;
},

As the title suggests i see this as a temporary fix, but effective none the less.

[thirstypixel]

Actually this doesn't fix the problem. Now the image is in the right position but it is placed on top of the input so no clicking is possible. Currently I'm just getting the input element's left and top styles and applying them to the left and top margin of the image element -3. There should be a better way to do this any suggestions.

[mike1993]

Condor,

If I do not have e.stopEvent() uncommented, the 'onClick' fores twices, thus cancelling a check. So, the box state does not change. What was the reason you've commented that line?

Thanks.



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();


Looks I've found a reason. The value of the checkbox is not being submitted w/ the form..

[nadeemshafi9]

thanks

[nadeemshafi9]

in IE7/8 the css works but makes the checbox invisible in FF, without teh css it shows fine in FF but looks double in IE. I did a hack to only include it in IE, i know you have a system in place for browser css compatability but it dosent seem to be working.



<!--[if IE 6]><style type="text/css" media="screen">@import "/css/ExtOverideCSS.css";</style><![endif]-->
<script language="JavaScript">
var ie7 = (document.all && !window.opera && window.XMLHttpRequest) ? true : false;
if(ie7) document.write("<link href=\"/css/ExtOverideCSS.css\" rel=\"stylesheet\" type=\"text/css\">");
</script>

[whnois]

this is second common unknown solution which i had lost many time in ExtJS. i got trouble with textfield key events until i learn enableKeyEvents config option which doesn't included by documentation.
Thanx

[tenthcup]

After I applied the patch, the checkbox was aligned to left. Thanks

[smorosanu]

I am using the checkbox group with ext 2.2 and with the css and extjs fixes.
When I try to make resize to the browser window and I have a checkbox group in that window, on FF3, I see the scroll bar displayed and I see all the labels for check boxes.

In IE 6 when I do the browser resizing for other resolution the checkbox group it is lost.

Any idea? I attached a screen shot too.

Thanks in advance.

[manu440]

hi there. I know this is an old issue but I just bumped into it because we are still using ext-js 2.3. Wanna change to ext-js 3 but this will take some minor changes so no a quick thing.

the fix did a good jop.
only I had to change the opacity setting in the last css class. otherwise the cheboxes were in the right place but no visible in IE 7 or FF 3.6. Here is how I have the last class settings now.


.x-form-check-wrap-inner input,.x-form-radio-wrap-inner input{position:absolute;-moz-opacity:0;}

works in IE 7, FF 3.6 and Chrome now.

Thanks for the fix. was looking for this for a while cause the autoShow:true solution didn't work like a charm

[whoaextjs]

I noticed an issue with this patch that caused incorrect behavior with checkboxes configured with readOnly: true. I think I resolved the issue, but I'm fairly unfamiliar with the Ext internals so someone with more experience will hopefully be able to verify.

In the Checkbox override:



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();
}
else {
// Fixes an issue where readOnly fields dom elements were toggled when the checkbox was not
e.stopEvent();
}
}
//e.stopEvent();
},

[ilnoor]

Hello and good day!

I have some troubles with switching focus from checkbox (with this patch installed) to previous control (treePanel). Because previous control not focused by native TAB-key handler, I'm trying to catch TAB-key pressing and want to set focus on it manually. But having issue: declared key listeners not firing...
Here is my code


//some declarations above...
{
name: 'blah',
fieldLabel: 'blabla',
keys: [
{
key:[Ext.EventObject.TAB],
fn: function (inp, e) {
console.log('checkbox key fired');
}
}
],
listeners: {
'keydown': function(inp, e) {
console.log('checkbox keydown fired');
}
},
xtype: 'checkbox'
}
//...


When checkbox focused, pressing TAB-key only moves focus to another control (skipping my treePanel), and no messages appears in the console. Also when pressing any another key - nothing happens.
Is there any workaround of this issue?