Column lock stoping cellclick of the grid

[Pravin.Pawar]

Hi,

I'm using following code to make cell clickable.

var scriptDetailsGrid = Ext.create('Ext.grid.Panel', {
id: 'scriptDetailGrid',
store: store,
header: false,
border: false,
emptyText: 'Script details unavailable.',
simpleSelect: false,
columns: [
{
text: "Description",
dataIndex: 'Description',
locked: true,
width: 450,
sortable: false
},
{
text: "Name",
dataIndex: 'Name',
width: 150,
sortable: true
},
{
text: "Address",
dataIndex: 'Address',
width: 150,
sortable: true
}
],
listeners: {
cellclick: function (grid, td, cellIndex, record, tr, rowIndex, e, eOpts) {
debugger
if (record.data.key == 'Description') {
Ext.Msg.alert('Description', record.data.value);
}
}
},
layout: 'fit',
region: 'center',
title: 'Script Details'
});

In the above code; I have freezed first column which is stoping cellclick event of the grid. Please let me know if there is any alternative way so that I can freeze column as well as make the cell item clickable.

Thanks, Pravin

[scottmartin]

This is due to the fact that the lock creates a new grid. You will need to access it as:

// GRID; LOCKED; LOCKEDGRID; VIEW;

Ext.onReady(function(){
 
    Ext.create('Ext.data.Store', {
        storeId : 'simpsonsStore',
        fields  : ['name', 'email', 'change'],
        data    : {'items' : [
            { 'name' : 'Lisa',  'email' : 'lisa@simpsons.com',  'change' : 100  },
            { 'name' : 'Bart',  'email' : 'bart@simpsons.com',  'change' : -20  },
            { 'name' : 'Homer', 'email' : 'home@simpsons.com',  'change' : 23   },
            { 'name' : 'Marge', 'email' : 'marge@simpsons.com', 'change' : -11  }
        ]},
        proxy   : {
            type   : 'memory',
            reader : {
                type : 'json',
                root : 'items'
            }
        }
    });

    var grid = Ext.create('Ext.grid.Panel', {
        title      : 'Simpsons',
        store      : Ext.data.StoreManager.lookup('simpsonsStore'),
        simpleSelect : false,
        columns    : [
            { header : 'Name', dataIndex : 'name', locked: true },
            { header : 'Email', dataIndex : 'email', flex : 1 },
            { header : 'Change', dataIndex : 'change', tdCls : 'x-change-cell' }
        ],
        height     : 200,
        width      : 400,
        
        listeners: { // not locked
            cellclick: function (grid, td, cellIndex, record, tr, rowIndex, e, eOpts) {
                if (cellIndex == 0) {
                    Ext.Msg.alert('grid click');
                }    
            }
        },        
        
        renderTo   : Ext.getBody()
    });

    var gridLocked = grid.lockedGrid.getView();

    gridLocked.on('cellclick', function(grid, td, cellIndex, record, tr, rowIndex, e, eOpts) {
        Ext.Msg.alert('locked grid click');
    });

});

Scott.

[Pravin.Pawar]

If we use following code then all column cells fire click event.


var gridLocked = grid.getView(); gridLocked.on('cellclick', function(grid, td, cellIndex, record, tr, rowIndex, e, eOpts) { Ext.Msg.alert('cell click'); });

Thanks for your help...

[rupamkhaitan]

My requirement is, on click on different cell different popup window will open with their own components.

So basically each cell click will open a popup where i will play with the component and on click of OK button it will set the value in the cell back.

how can i achieve tht?

[Pravin.Pawar]

You can add listener for cellclick and play with your logic-

listeners: { // not locked
cellclick: function (grid, td, cellIndex, record, tr, rowIndex, e, eOpts) {
Ext.Msg.alert('Cell click');
}
}