1. #1
    Sencha Premium Member
    Join Date
    Oct 2013
    Posts
    41
    Answers
    5
    Vote Rating
    2
    jocatastar is on a distinguished road

      0  

    Default Answered: Disable row expand listener for check box in grid

    Answered: Disable row expand listener for check box in grid


    I have a grid and i have
    Code:
     selModel: {         selType: 'checkboxmodel'     },
    in that. And also i am expanding row if i click on the rows. Now the problem is row is expanding if select check box also. I don't need that. I want the row to expand only when i click on the row other than check box. Please help

  2. You can use the beforeitemclick event callback to stop the click event in that case.

    For example:
    Code:
    listeners: {
        beforeitemclick: function(grid, record, item, index, event) {
            if (event.getTarget().className.indexOf('x-grid-checkcolumn') !== -1) {
                return false;
            }
        }
    
    }

  3. #2
    Sencha Premium Member
    Join Date
    Feb 2010
    Location
    Chicago
    Posts
    34
    Answers
    10
    Vote Rating
    8
    Johnny Major will become famous soon enough

      0  

    Default


    Here is something to get you started.

    Code:
            Ext.create('Ext.data.Store', {
                storeId:'simpsonsStore',
                fields:['name', 'email', 'phone'],
                data:{'items':[
                    { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
                    { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
                    { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
                    { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
                ]},
                proxy: {
                    type: 'memory',
                    reader: {
                        type: 'json',
                        root: 'items'
                    }
                }
            });
            
            Ext.create('Ext.grid.Panel', {
                title: 'Simpsons',
                store: Ext.data.StoreManager.lookup('simpsonsStore'),
                columns: [
                    { text: 'Name',  dataIndex: 'name' },
                    { text: 'Email', dataIndex: 'email', flex: 1 },
                    { text: 'Phone', dataIndex: 'phone' }
                ],
                height: 200,
                width: 400,
                selModel: {
                    selType: 'checkboxmodel'
                },
                plugins: [{
                    ptype: 'rowexpander',
                    rowBodyTpl : 'xxxx'
                }],
                renderTo: Ext.getBody(),
                listeners : {
                    scope : this,
                    cellclick : function(cmp, td, cellIndex, record, tr, rowIndex, e, eOpts){
                        //only expand / collapse if user is not clicking selection checkbox
                        //
                        if (cellIndex != 0){
                            cmp.up('grid').plugins[0].toggleRow(rowIndex, record);
                        }
                    }
                }
            });

  4. #3
    Sencha User
    Join Date
    Dec 2013
    Location
    Italy
    Posts
    23
    Answers
    3
    Vote Rating
    6
    f.baron is on a distinguished road

      1  

    Default


    You can use the beforeitemclick event callback to stop the click event in that case.

    For example:
    Code:
    listeners: {
        beforeitemclick: function(grid, record, item, index, event) {
            if (event.getTarget().className.indexOf('x-grid-checkcolumn') !== -1) {
                return false;
            }
        }
    
    }

  5. #4
    Sencha Premium Member
    Join Date
    Oct 2013
    Posts
    41
    Answers
    5
    Vote Rating
    2
    jocatastar is on a distinguished road

      0  

    Default


    Hi baron,
    If i do the way that you mentioned it is stopping the event but check-box is not in selected mode.

    I want check-box to be in selected mode and row should not be expanded

  6. #5
    Sencha User
    Join Date
    Dec 2013
    Location
    Italy
    Posts
    23
    Answers
    3
    Vote Rating
    6
    f.baron is on a distinguished road

      1  

    Default


    Hi!
    You could force selection inside the 'if' statement, so if the click is blocked you can set selection anyway using gird.getSelectionModel().select()/gird.getSelectionModel().deselect().

Thread Participants: 2