[OPEN-135] Disabled Checkboxes/Radiobuttons still working

[basty]

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]

I can confirm this behaviour.
The temp solution is to use toggle fields, but they need some CSS love.

[YetiTheFoot]

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;
}

[Zux_]

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

[Zux_]

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

[Zux_]

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.

[Zux_]

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]

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.

[Zux_]

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]

I have put the code inside launch function of Ext.Application as you sugested. But still its not working. I am using sencha touch1.

[Zux_]

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]

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.

[Zux_]

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?