Results 1 to 2 of 2

Thread: Checkbox in multiselect doesn't work for selecting

Hybrid View

Previous Post Previous Post   Next Post Next Post
    Success! Looks like we've fixed this one. According to our records the fix was applied for TOUCH-4055 in a recent build.
  1. #1
    Sencha User
    Join Date
    Sep 2012
    Vote Rating

    Default Checkbox in multiselect doesn't work for selecting


    Ext version tested:
    • Sencha 2.1.1
    Browser versions tested against:
    • Chrome (Windows 7)
    • Safari (iPad OS 6)
    • In multiselects, clicking directly on the check of a selected item doesn't deselect the item, while clicking anywhere else on the item does.
    Steps to reproduce the problem:
    • Create any multiselect list, select an item, then try clicking on the check.
    The result that was expected:
    • Clicking on the check should deselect the item
    The result that occurs instead:
    • Nothing happens
    Test Case:

    This is the example code for Ext.field.Select. When you open up the select options, clicking on the check does nothing.
    Ext.create('Ext.form.Panel', {
        fullscreen: true,
        items: [
                xtype: 'fieldset',
                title: 'Select',
                items: [
                        xtype: 'selectfield',
                        label: 'Choose one',
                        options: [
                            {text: 'First Option',  value: 'first'},
                            {text: 'Second Option', value: 'second'},
                            {text: 'Third Option',  value: 'third'}


    See this URL for live test case:!/...t.field.Select

    Debugging already done:
    • In my testing, it seems that ?-webkit-mask used to display the check on the x-list-item-inner component catches the tap event and stops it from propagating further. So the tap event shows up on the x-list-item-inner, but does not bubble up to the List's container.innerElement.
    Possible fix:
    These two overrides are a hack, but they seem to work:
    Ext.define('Ext.dataview.component.ListItemOverride', {
        override: 'Ext.dataview.component.ListItem',
        //bubble up 'checkboxtap' event since it has to be handled separately due to a Sencha bug
        initialize: function(){
        //When a user clicks on the checkbox, the event is not caught by the list 'tap' event that is used for other clicks.
        //This is to listen for that particular tap event and pass the event up as a 'chcekboxtap'
        updateBody: function(body, oldBody) {
            var THIS = this;
            if (body) {
                body.element.getParent().on('tap', function(e, target){
                    if(target.className.indexOf('x-list-item-inner') != -1){ //This element only gets the event if the checkbox is clicked on
                        THIS.fireEvent('checkboxtap', e, target);
    Ext.define('Ext.dataview.ListOverride', {
        override: 'Ext.dataview.List',
        //since the tap listener misses the checkbox being tap, catch the custom event made to detect that event and
        //act accordingly.
        initialize: function() {
            this.on('checkboxtap', this.onItemTap);

  2. #2
    Sencha User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Gainesville, FL
    Vote Rating


    Thanks for the report! I have opened a bug in our bug tracker.

Tags for this Thread

Posting Permissions

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