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