Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: [OPEN-135] Disabled Checkboxes/Radiobuttons still working

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    May 2011
    Posts
    10
    Vote Rating
    0
      0  

    Exclamation [OPEN-135] Disabled Checkboxes/Radiobuttons still working

    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) 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")
    Last edited by basty; 7 Jul 2011 at 8:21 AM. Reason: The same problem exists also on Andorid, iOS and Blackberry

  2. #2
    Sencha User interfasys's Avatar
    Join Date
    Mar 2011
    Location
    UK & Switzerland
    Posts
    125
    Vote Rating
    1
      0  

    Default

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

  3. #3
    Sencha User
    Join Date
    Mar 2009
    Posts
    4
    Vote Rating
    0
      0  

    Default Workaround

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

  4. #4
    Sencha User
    Join Date
    Apr 2011
    Location
    Italy
    Posts
    25
    Vote Rating
    0
      0  

    Default

    Hi, I have the same problem also via browser. Here's the code that shows that item has been disabled:

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

    Code:
    //...
    ,{
       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

  5. #5
    Sencha User
    Join Date
    Apr 2011
    Location
    Italy
    Posts
    25
    Vote Rating
    0
      0  

    Default

    Finally I figured out with this workaround:

    Code:
    //...
    ,{
       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:

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

  6. #6
    Sencha User
    Join Date
    Apr 2011
    Location
    Italy
    Posts
    25
    Vote Rating
    0
      0  

    Default

    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.

  7. #7
    Sencha User
    Join Date
    Apr 2011
    Location
    Italy
    Posts
    25
    Vote Rating
    0
      0  

    Default

    Hi,
    Today I went back to this problem and I finally solved the problem with this workaround:

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

  8. #8
    Sencha User
    Join Date
    Oct 2011
    Location
    Bangalore, India
    Posts
    13
    Vote Rating
    1
      0  

    Default

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

  9. #9
    Sencha User
    Join Date
    Apr 2011
    Location
    Italy
    Posts
    25
    Vote Rating
    0
      0  

    Default

    Hi,
    you could use it as is simply by adding it in your app launch:

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

  10. #10
    Sencha User
    Join Date
    Oct 2011
    Location
    Bangalore, India
    Posts
    13
    Vote Rating
    1
      0  

    Default

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

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •