View Full Version : [OPEN-135] Disabled Checkboxes/Radiobuttons still working
basty
26 May 2011, 5:06 AM
Sencha Touch version:
1.1.0
Platform tested against:
Windows 7 (with Google Chrome)
BlackBerry Playbook (default Browser)
Android 2.2, HTC Desire (default Browser and PhoneGap)
Blackberry 6, Torch (App with PhoneGap)
iOS 4, iPhone (default Browser)
Description:
Very similar to this problem (BUG: Disabled Textarea Still Popup Soft Keyboard In Android (http://www.sencha.com/forum/showthread.php?131208-BUG-Disabled-Textarea-Still-Popup-Soft-Keyboard-In-Android)) it has to do with disabled form elements. While disabled checkboxes and radiobuttons on Windows/Chrome are not accessible (works fine), you can still check/uncheck this elements on the BlackBerry-Playbook (and maybe other Platforms?!).
Steps to reproduce the problem:
Simply use the Kitchen Sink example which is copied to a local Webserver in my case. Open the Kitchen Sink in the Playbooks default Browser.
Browse to: "User Interface" --> "Forms"
Scroll down the page an click "Disable fields"
As you see, you can still check/uncheck the Checkbox ("Cool") or die Radiobuttons ("Favorite colors")
interfasys
4 Jun 2011, 3:15 PM
I can confirm this behaviour.
The temp solution is to use toggle fields, but they need some CSS love.
YetiTheFoot
26 Aug 2011, 11:09 AM
I had similar problem with my checkbox on Android and iPad.
I found workaround with CSS:
.x-field .x-input-checkbox:disabled:after {
border-color: #dddddd!important;
color: #dddddd!important;
}
Hi, I have the same problem also via browser. Here's the code that shows that item has been disabled:
<div id="ext-comp-1325" class=" x-field x-field-checkbox x-label-align-left x-item-disabled">
<div class="x-form-label" id="ext-gen1771">
<span>FraFri</span>
</div>
<input id="ext-gen1770" type="checkbox" name="FF" class="x-input-checkbox" tabindex="-1" value="false" readonly>
</div>
But the input type checkbox is always checkable. If I add, via element inspection, the property disabled in the html input element, then the item is no longer clickable. So I made this fix, passing on object configuration the follow renderTpl property:
//...
,{
xtype:'checkboxfield',
//...
renderTpl:[
'<tpl if="label"><div class="x-form-label"><span>{label}</span></div></tpl>',
'<tpl if="fieldEl"><input id="{inputId}" type="{inputType}" name="{name}" class="{fieldCls}" tabIndex="-1" ',
'<tpl if="checked"> checked </tpl>',
'<tpl if="disabled"> disabled </tpl>', //this is my add
'<tpl if="style">style="{style}" </tpl> value="{inputValue}" />',
'</tpl>'
],
//...
},
//...
It works but then the item remains always not checkable, can someone help us please?
Andrea
Finally I figured out with this workaround:
//...
,{
xtype:'checkboxfield',
//...
renderTpl:[
'<tpl if="label"><div class="x-form-label"><span>{label}</span></div></tpl>',
'<tpl if="fieldEl"><input id="{inputId}" type="{inputType}" name="{name}" class="{fieldCls}" tabIndex="-1" ',
'<tpl if="checked"> checked </tpl>',
'<tpl if="disabled==true"> disabled </tpl>',//my add
'<tpl if="disabled==false"> enabled</tpl>',//my add
'<tpl if="style">style="{style}" </tpl> value="{inputValue}" />',
'</tpl>'
],
//copy and paste the renderTpl
tpl: [
'<tpl if="label"><div class="x-form-label"><span>{label}</span></div></tpl>',
'<tpl if="fieldEl"><input id="{inputId}" type="{inputType}" name="{name}" class="{fieldCls}" tabIndex="-1" ',
'<tpl if="checked"> checked </tpl>',
'<tpl if="disabled==true"> disabled </tpl>',
'<tpl if="disabled==false"> enabled</tpl>',
'<tpl if="style">style="{style}" </tpl> value="{inputValue}" />',
'</tpl>'
],
onRender: function() {
var isChecked = this.getBooleanIsChecked(this.checked);
Ext.apply(this.renderData, {
inputValue : String(this.value),
checked : isChecked,
disabled : this.disabled //this is my add
});
Ext.form.Checkbox.superclass.onRender.apply(this, arguments);
if (this.fieldEl) {
this.mon(this.fieldEl, {
click: this.onChange,
scope: this
});
this.setChecked(isChecked);
this.originalState = this.isChecked();
}
},
//...
},
//...
And then when you enable/disable fields I made this:
//..get the current cell
cell.setDisabled(disabled);
if(cell.xtype === 'checkboxfield'){
cell.renderData.disabled=disabled; //var disabled could be true or false
cell.renderData.checked=cell.isChecked();
cell.update(cell.renderData);
}
//...
Hope this helps! Bye!
Andrea
However, with this fix there's a problem with the set of checked value. The value of fieldEl.dom.checked of the checkboxfield component is always false. It seems that there's not a set although the checkbox has been checked. Where's the problem?
Thanks in advance.
Hi,
Today I went back to this problem and I finally solved the problem with this workaround:
Ext.override(Ext.form.Checkbox, {
onChange: function(e) {
if (e) {
if (e.browserEvent) {
e = e.browserEvent;
}
if (Ext.supports.Touch && !e.isSimulated) {
e.preventDefault();
e.stopPropagation();
return;
}
}
if(!this.isDisabled()){
if (this.isChecked()) {
this.lastState=true;
this.fireEvent('check', this);
} else {
this.lastState=false;
this.fireEvent('uncheck', this);
}
}
else{
var state;
if(!Ext.isEmpty(this.lastState)){
state=this.lastState;
}
else{
state=Ext.isEmpty(this.originalState) ? this.getBooleanIsChecked(this.checked) : this.originalState;
}
this.setChecked(state);
}
}
}
);
It was very useful adding the variable lastState.
Hope this helps!
Bye!
Andrea
Nilanchala
19 Jan 2012, 1:47 AM
Hello Andrea. Looks like your workaround will also fix my problem. As i am a very beginner, I have no much idea how to use your piece of code. Can you please explain me, so that I could use for my problem.
Thanks in advance.
Hi,
you could use it as is simply by adding it in your app launch:
Ext.regApplication({
name : 'app',
//...
launch : function() {
//Add the checkbox workaround code here.
}
//...
});
Or as I did, adding it in a utility class file.
Your welcome,
Andrea
Nilanchala
20 Jan 2012, 12:57 AM
I have put the code inside launch function of Ext.Application as you sugested. But still its not working. I am using sencha touch1.
It works for me, maybe you have to follow the Sencha API about creation and displaying of panels, application launch, js files including, ... . My workaround code has no dependence outside because it is a Sencha override, done inside Ext.override.
Andrea
Nilanchala
20 Jan 2012, 5:31 AM
Yes Andrea,.. I am following up the Sencha MVC model. I have only one launch in application in app.js. That's were i am putting it. Also i have tried adding to Util class, which I am loading from HTML. I guess those are the two approached you have suggested.
Don't understand where the problem goes.
Ok, then have you try to run your app without the checkbox workaround? It works?
What kinds of error are displayed in the Javascript console?
Powered by vBulletin® Version 4.2.3 Copyright © 2018 vBulletin Solutions, Inc. All rights reserved.