1. #1
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    13
    Vote Rating
    0
    summer980824 is on a distinguished road

      0  

    Default Unable to disable the checkboxes in the check columns

    Unable to disable the checkboxes in the check columns


    Hi,

    I am trying to disable the check boxes when using Ext.ux.CheckColumn. When I set disabled is true in the configuration, it doesn't seem to work, as I can still change the check boxes in the column.

    Code:
    {
                    xtype: 'checkcolumn',
                    header: 'Create',
                    dataIndex: 'create',
                    menuDisabled: true,
                    disabled: true
                }

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,074
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    You could just create override to disable the action:

    Code:
    Ext.override(Ext.ux.CheckColumn, {
        processEvent: Ext.emptyFn // do nothing
    });
    This is a simplified version, you could copy the entire function and replace with your code.

    Scott.

  3. #3
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,074
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    err, The previous leaves a dirty marker .. here is a better approach:

    Code:
    header: 'Check',
    xtype: 'checkcolumn',
    dataIndex: 'check',
    editor: {
    disabled: true,
    	xtype: 'checkbox'
    },
    listeners: {
    	beforecheckchange: function(){
    		return false; // disable check
    	}
    }
    Scott.

  4. #4
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    13
    Vote Rating
    0
    summer980824 is on a distinguished road

      0  

    Default


    Brilliant solution! Thanks for your help

    But I think adding the listener is enough to disable the checkbox, it's no need to configure the editor.

  5. #5
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    144
    Vote Rating
    1
    anitacynax is on a distinguished road

      0  

    Default difference between checkchange and beforecheckchange

    difference between checkchange and beforecheckchange


    What is the difference between checkchange and beforecheckchange? I am currently using checkchange but do not understand the difference between the two. Thanks.

  6. #6
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    144
    Vote Rating
    1
    anitacynax is on a distinguished road

      0  

    Default


    Quote Originally Posted by scottmartin View Post
    err, The previous leaves a dirty marker .. here is a better approach:

    Code:
    header: 'Check',
    xtype: 'checkcolumn',
    dataIndex: 'check',
    editor: {
    disabled: true,
        xtype: 'checkbox'
    },
    listeners: {
        beforecheckchange: function(){
            return false; // disable check
        }
    }
    Scott.
    In this case 'return false' in the beforecheckchange function disables ALL the checkboxes in the checkcolumn. What do you do however if you want to enable only ONE checkbox in the checkcolumn (i.e. disable all but one checkbox in the checkcolumn)?

  7. #7
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,074
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Is there a condition that you can set based on the params?

    Code:
    beforecheckchange: function(column, row, checked, opts){ 
        if (..) { return false; } 
    }
    Scott

  8. #8
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    144
    Vote Rating
    1
    anitacynax is on a distinguished road

      0  

    Default


    Thanks for the reply, Scott. I solved this issue in another way. Thanks though.

  9. #9
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,074
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    It would be helpful for others if you would post your solution

    Scott.

  10. #10
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    144
    Vote Rating
    1
    anitacynax is on a distinguished road

      0  

    Default solution: use checkchange

    solution: use checkchange


    I used checkchange and the following line of code in checkchange:

    for (var i =0; i < teststore.getCount(); i++) {teststore.getAt(i).set(this.dataIndex, false); record.set(this.dataIndex, true);}

    Here is the code for the grid and the checkcolumns:

    Code:
    var grid = Ext.create('Ext.grid.Panel', {
      id: 'animalGrid',
      title: '',
      store: teststore, 
      plugins: ['headertooltip'],
      columns: [
       { text: 'Name',  dataIndex: 'Name', width: 120},
       { text: 'Role',  dataIndex: 'Type', width: 125},
       { text: 'Mammal', dataIndex: 'Mammal', xtype: 'checkcolumn', listeners: {'checkchange' : function(column, recordIndex, checked) {var record = teststore.getAt(recordIndex); record.set('Amphibian', false); record.set('Bird', false); for (var i =0; i < teststore.getCount(); i++) {teststore.getAt(i).set(this.dataIndex, false); record.set(this.dataIndex, true);}  }},width: 68, tooltip: '<b>Mammal Description:</b> '},
       { text: 'Amphibian', dataIndex: 'Amphibian', xtype: 'checkcolumn', listeners: {'checkchange' : function(column, recordIndex, checked) {var record = teststore.getAt(recordIndex); record.set('Mammal', false); record.set('Bird', false); }},width: 68, tooltip: '<b>Amphibian Description:</b> '},
       { text: 'Bird', dataIndex: 'Bird', xtype: 'checkcolumn', listeners: {'checkchange' : function(column, recordIndex, checked) {var record = teststore.getAt(recordIndex); record.set('Mammal', false); record.set('Amphibian', false); }},width: 68, tooltip: '<b>Bird Description:</b>'}
      ]
    Last edited by anitacynax; 16 May 2013 at 7:02 AM. Reason: code edit