1. #1
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      0  

    Exclamation [2.2] Checkbox/Radio cumulative bugfix

    [2.2] Checkbox/Radio cumulative bugfix


    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!

    Code:
    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).

    Code:
    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:

    Code:
    <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!
    Last edited by Condor; 15 Oct 2008 at 6:07 AM. Reason: validation

  2. #2
    Ext User
    Join Date
    May 2008
    Posts
    17
    Vote Rating
    0
    tsa is on a distinguished road

      0  

    Default


    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.

  3. #3
    Ext User
    Join Date
    May 2007
    Posts
    71
    Vote Rating
    0
    DeeZ is on a distinguished road

      0  

    Default in SVN ?

    in SVN ?


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

  4. #4
    Ext JS Premium Member
    Join Date
    Mar 2007
    Posts
    173
    Vote Rating
    0
    MaxT is on a distinguished road

      0  

    Default Tabbing checkboxes, dotted line around.

    Tabbing checkboxes, dotted line around.


    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

  5. #5
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      0  

    Default


    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.

  6. #6
    Ext JS Premium Member
    Join Date
    Mar 2007
    Posts
    173
    Vote Rating
    0
    MaxT is on a distinguished road

      0  

    Default Checkboxes - tabbing and focus

    Checkboxes - tabbing and focus


    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

  7. #7
    Ext User hunkybill's Avatar
    Join Date
    Mar 2007
    Location
    Montreal
    Posts
    67
    Vote Rating
    0
    hunkybill is on a distinguished road

      0  

    Default I might be crazy butttt

    I might be crazy butttt


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

  8. #8
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      0  

    Default


    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?

  9. #9
    Ext User hunkybill's Avatar
    Join Date
    Mar 2007
    Location
    Montreal
    Posts
    67
    Vote Rating
    0
    hunkybill is on a distinguished road

      0  

    Default


    Quote Originally Posted by Condor View Post
    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...

    Code:
    <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????

  10. #10
    Ext User
    Join Date
    Sep 2008
    Posts
    5
    Vote Rating
    0
    leoman730 is on a distinguished road

      0  

    Default


    I applied the patch that Condor provided above, and it solves my checkbox and radiobox issue.
    Last edited by leoman730; 10 Sep 2008 at 5:56 AM. Reason: Problem fixed.

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar