1. #1
    Sencha User
    Join Date
    Aug 2012
    Location
    Pune, India
    Posts
    78
    Answers
    5
    Vote Rating
    0
    Pravin.Pawar is on a distinguished road

      0  

    Default Answered: Column lock stoping cellclick of the grid

    Answered: Column lock stoping cellclick of the grid


    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

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

    Code:
    // 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.

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,085
    Answers
    675
    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


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

    Code:
    // 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.

  4. #3
    Sencha User
    Join Date
    Aug 2012
    Location
    Pune, India
    Posts
    78
    Answers
    5
    Vote Rating
    0
    Pravin.Pawar is on a distinguished road

      0  

    Default


    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...

  5. #4
    Sencha Premium Member
    Join Date
    Nov 2012
    Location
    Bangalore
    Posts
    79
    Vote Rating
    1
    rupamkhaitan is on a distinguished road

      0  

    Default


    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?

  6. #5
    Sencha User
    Join Date
    Aug 2012
    Location
    Pune, India
    Posts
    78
    Answers
    5
    Vote Rating
    0
    Pravin.Pawar is on a distinguished road

      0  

    Default


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

Thread Participants: 2