cellclick event doesn't work when rendering html table

I have a grid panel and I'm using renderer for certain column.., I also use cellclick for handling click.

In renderer config, I return html table to place the value of a cell (I have some values in a cell).

The problem is, when I click the cell that has renderer returning html table, the cellclick event doesn't work otherwise it works.

How could this happen?

Here is my code :

    // Variable For HTML Code
    var renderFerrous = '<table style="text-align: left; width: 140px;" border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse">'+
                            '<tbody>'+
                            '<tr>'+
                                '<td style="text-align: center; width: 50px;">Rating</td>'+
                                '<td style="text-align: center; width: 50px;">Colour</td>'+
                                '<td style="text-align: center; width: 50px;">Ferrous</td>'+
                            '</tr>'+
                            '<tr>'+
                                '<td style="text-align: center; width: 50px;">val1</td>'+
                                '<td style="text-align: center; width: 50px;">val2</td>'+
                                '<td style="text-align: center; width: 50px;">val3</td>'+
                            '</tr>'+
                        ' </tbody>'+
                        '</table>';

ewhid.cpt.grid = Ext.extend(Ext.grid.GridPanel, {
    constructor: function (config) {
        config = config || {};
        config.id = config.id || 'cpt_grid';
        config.height = config.height || 300;
        config.width = config.width || 900;
        config.border = config.border || true;
        config.frame = config.frame || true;
        config.deferredRender = true;
        config.stripeRows = true;
        config.loadMask = true;
        config.ds = this.store_grid;
        config.ds = new newhid.cpt.store();
        config.sm = new Ext.grid.RowSelectionModel({
            singleSelect: true,
            listeners: {
                rowselect: function (smObj, rowIndex, record) {
                    selRecordStore = record;
                    record1 = record;
                }
            }
        }),

        // MY CELLCLICK HANDLER
        config.listeners = {
            cellclick: function(grid, rowIndex, colIndex, e) {
                colIndex1 = colIndex; 
                el = e.getTarget();
                record = grid.getStore().getAt(rowIndex).data;
                record2 = grid.getStore().getAt(rowIndex);

                var fieldName = grid.getColumnModel().getDataIndex(colIndex); // Get field name
                var data = record2.get(fieldName); // get data in a cell

                console.log(fieldName);
                console.log(record2.get(fieldName));

                if (grid.manage_cell != undefined && grid.manage_cell.isVisible()) {
                    grid.manage_cell.hide();
                    grid.manage_cell.destroy(this.items);
                    return false;
                }
开发者_如何学运维                if(colIndex == 8 || colIndex == 9){
                    if(record.idrecordingtype == 0 || !record.idrecordingtype){
                        grid.manage_cell = new manage_cell({
                            items: new newhid.cpt.formValue({
                                record : record2.get(fieldName)
                            })
                        });
                        grid.manage_cell.show();
                        grid.manage_cell.getEl().alignTo(el, 'bl');
                    }

                    else if(record.idrecordingtype == 3){
                        grid.manage_cell = new manage_cell({
                            // items: new newhid.cpt.formIso()
                            items: new newhid.cpt.formIso2()
                        });
                        grid.manage_cell.show();
                        grid.manage_cell.getEl().alignTo(el, 'bl');
                    }
                    else if(record.idrecordingtype == 4){
                        grid.manage_cell = new manage_cell({
                            items:  new newhid.cpt.formFerrous()
                        });
                        var val = record2.get(fieldName);
                        var trim = val.replace(/\s*\/\s*/g,"/");
                        var val2 = trim.split("/");

                        Ext.getCmp('id_rating').setValue(val2[0]);
                        Ext.getCmp('colour').setValue(val2[1]);
                        Ext.getCmp('id_ferrous').items.get(0).setValue(val2[2]);

                        var val = record2.get(fieldName);
                        var val2 = str.split("/");

                        var idrating = Ext.getCmp('id_rating');
                        idrating.store.removeAll();
                        idrating.store.load({
                            params: {
                                'idrating_type' : record.idrating_type,
                                'idsite': Ext.getCmp('site_id').getValue(),
                                'idfleet': Ext.getCmp('fleet_id').getValue()
                            }
                        })

                        var colour = Ext.getCmp('colour');
                        colour.store.removeAll();
                        colour.store.load()

                        grid.manage_cell.show();
                        grid.manage_cell.getEl().alignTo(el, 'bl');
                    }

                    else if(record.idrecordingtype == 5){
                        grid.manage_cell = new manage_cell({
                            items: new newhid.cpt.formFluid()
                        });

                        var val = record2.get(fieldName);
                        var trim = val.replace(/\s*\/\s*/g,"/");
                        var val2 = trim.split("/");
                        console.log(trim);
                        Ext.getCmp('id_qty').setValue(val2[1]);
                        Ext.getCmp('id_unit_value').setValue(val2[2]);
                        Ext.getCmp('id_fluid').items.get(0).setValue(val2[0]);


                        var idunit = Ext.getCmp('id_unit_value');
                        idunit.store.removeAll();
                        idunit.store.load({
                            params: {
                                'idunit': record.idunit
                            }
                        })
                        grid.manage_cell.show();
                        grid.manage_cell.getEl().alignTo(el, 'bl');
                    }

                }
                else if(colIndex == 10){
                    if(record.idrecordingtype == 0 || !record.idrecordingtype){
                        // console.log(formunit.items.items);
                        grid.manage_cell = new manage_cell({
                            items: new newhid.cpt.formUnit()
                        });
                        var valCmbUnit = record2.get(fieldName);
                        var idunit = Ext.getCmp('id_unit_value');
                        idunit.store.removeAll();
                        idunit.store.load({
                            params: {
                                'idunit': record.idunit
                            }
                        });
                        (valCmbUnit ? Ext.getCmp('id_unit_value').setValue(valCmbUnit): false);
                        grid.manage_cell.show();
                        grid.manage_cell.getEl().alignTo(el, 'bl');
                    }
                    else if(record.idrecordingtype == 4){
                        return false;
                    }
                    else if(record.idrecordingtype == 5){
                        return false;
                    }
                }
            }
        }

        // Group Grid
      config.columns = [
        {
            header: 'Ord.',
            width: 40,
            align: 'center',
            sortable: true,
            dataIndex: 'orders',
            menuDisabled: true
        },
        {
            header: "Sub.",
            width: 40,
            align: 'center',
            sortable: true,
            dataIndex: 'suborder'

        },
        {
            header: "CC",
            width: 50,
            align: 'center',
            sortable: true,
            dataIndex: 'idcomponent'

        },
        {
            header: "Mod",
            width: 50,
            align: 'center',
            sortable: true,
            dataIndex: 'idmodifier'

        },
        {
            header: "Condition",
            width: 80,
            align: 'center',
            sortable: true,
            dataIndex: 'conditions'
        },
        {
            header: "Rec.Parameter",
            width: 100,
            align: 'center',
            sortable: true,
            dataIndex: 'idrecordparameter',

        },
        {
            header: "Spesification",
            width: 100,
            align: 'center',
            sortable: true,
            dataIndex: 'specification',

        },
        {
            header: "M",
            width: 40,
            align: 'center',
            sortable: true,
            dataIndex: 'mandatory',

        },
        {
            header: "Actual Reading",
            width: 220,
            align: 'center',
            sortable: true,
            dataIndex: 'act_reading',
            renderer: function(val, meta, rec){

                if(val == ""){
                    meta.attr = 'style="color: red; cursor:pointer;"';
                    return 'Manage';
                }
                else{
                    return "<center>"+renderFerrous+"</center>";
                }
            }

        },
        {
            header: "Adjusted Reading",
            width: 220,
            align: 'center',
            sortable: true,
            dataIndex: 'adj_reading',
            renderer: function(val, meta, rec){
                if(val == ""){
                    meta.attr = 'style="color: red; cursor:pointer;"';
                    return 'Manage';
                }
                else{
                    return val;
                }
            }

        },
        {
            header: "Unit",
            width: 80,
            align: 'center',
            sortable: true,
            dataIndex: 'unit',
            renderer: function(val, meta, rec){
                if(rec.data.idrecordingtype == 4 || rec.data.idrecordingtype == 5 || rec.data.idrecordingtype == 3){
                    str = '';
                    return str;
                }
                else if(val == ""){
                    meta.attr = 'style="color: red; cursor:pointer;"';
                    return 'Manage';
                }
                else{
                    return val;
                }
            }

        },
        {
            header: "Coment",
            width: 80,
            align: 'center',
            sortable: true,
            dataIndex: 'comments'
        },
        {
            header : 'idcpt_template',
            hidden: true,
            dataIndex: 'idcpt_template'
        },
        {
            header: 'idrecordingtype',
            hidden: true,
            dataIndex: 'idrecordingtype'
        },
        {
            header: 'idunit',
            hidden: true,
            dataIndex: 'idunit'
        },
        {
            header: 'idrating_type',
            hidden: true,
            dataIndex: 'idrating_type'
        }
    ];
        newhid.cpt.grid.superclass.constructor.call(this, config);
    }
});

Can somebody help me please?

Thanks in Advance..

As I recall, Ext makes some assumptions when determining which cell is clicked. One assumption it makes is that the only tables in a grid are rendered by the grid. In other words, by using a table in your renderer, you are confusing the code that generates the click event. Luckily, you can get the same effect without a table.

Try something like this for your template:

  <div>
    <span>Rating</span>
    <span>Color</span>
    <span>Ferrous</span>
  </div>
  <div>
    <span>val1</span>
    <span>val2</span>
    <span>val3</span>
  </div>

Add this css to your page

  .table-ish {
    width: 156px;

    border: 1px solid black;
    overflow: auto;

  }

  .table-ish div span {
    float: left;
    width: 50px;
    text-align: center;
    border: 1px solid black;
  }

Change your column definition to inclode:

css: 'table-ish',

Caveat: I don't have Ext working on this computer, so some of this is conjecture, but you've been waiting for a while now so I figured I'd at least post this.