Extjs cellclick事件不发生'；呈现html表时无法工作

我有一个网格面板，我对某些列使用渲染器。我还使用cellclick处理单击

在renderer config中，我返回html表格以放置单元格的值（我在单元格中有一些值）

问题是，当我单击包含返回html表的单元格时，cellclick事件不起作用，否则它会起作用

这怎么会发生

这是我的密码：

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

//HTML代码的变量
var renderFerrous=“”+
''+
''+
“评级”+
“颜色”+
“铁”+
''+
''+
“瓦尔1”+
“val2”+
“val3”+
''+
' '+
'';
ewhid.cpt.grid=Ext.extend（Ext.grid.GridPanel{
构造函数：函数（配置）{
config=config |{}；
config.id=config.id | |“cpt|U网格”；
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\u网格；
config.ds=newhid.cpt.store（）；
config.sm=new Ext.grid.RowSelectionModel({
singleSelect:true，
听众：{
行选择：函数（smObj、行索引、记录）{
selRecordStore=记录；
记录1=记录；
}
}
}),
//我的手机点击处理器
config.listeners={
cellclick:函数（网格、行索引、共索引、e）{
colIndex1=colIndex；
el=e.getTarget（）；
record=grid.getStore（）.getAt（rowIndex）.data；
record2=grid.getStore（）.getAt（行索引）；
var fieldName=grid.getColumnModel（）.getDataIndex（colIndex）；//获取字段名
var data=record2.get（fieldName）；//获取单元格中的数据
console.log（字段名）；
console.log（record2.get（fieldName））；
if（grid.manage\u cell！=未定义&&grid.manage\u cell.isVisible（））{
grid.manage_cell.hide（）；
网格。管理单元。销毁（此项）；
返回false；
}
如果（colIndex==8 | | colIndex==9）{
if（record.idrecordingtype==0 | |！record.idrecordingtype）{
grid.manage\u单元格=新的manage\u单元格({
项目：新建newhid.cpt.formValue({
记录：record2.get（字段名）
})
});
grid.manage_cell.show（）；
grid.manage_cell.getEl（）.alignTo（el，'bl'）；
}
else if（record.idrecordingtype==3）{
grid.manage\u单元格=新的manage\u单元格({
//项目：newhid.cpt.formIso（）新
项目：新newhid.cpt.formIso2（）
});
grid.manage_cell.show（）；
grid.manage_cell.getEl（）.alignTo（el，'bl'）；
}
else if（record.idrecordingtype==4）{
grid.manage\u单元格=新的manage\u单元格({
项目：newhid.cpt.formFerror（）
});
var val=record2.get（fieldName）；
var trim=val.replace（/\s*\/\s*/g，“/”；
var val2=修剪分割（“/”）；
Ext.getCmp（'id_rating'）.setValue（val2[0]）；
Ext.getCmp（'color'）.setValue（val2[1]）；
Ext.getCmp（'id_'）.items.get（0）.setValue（val2[2]）；
var val=record2.get（fieldName）；
var val2=str.split（“/”）；
var idrating=Ext.getCmp（“id_评级”）；
idrating.store.removeAll（）；
idrating.store.load({
参数：{
“idrating_type”：记录。idrating_type，
'idsite'：Ext.getCmp（'site_id'）.getValue（），
“idfleet”：Ext.getCmp（'fleet_id'）.getValue（）
}
})
var color=Ext.getCmp（“颜色”）；
color.store.removeAll（）；
color.store.load（）
grid.manage_cell.show（）；
grid.manage_cell.getEl（）.alignTo（el，'bl'）；
}
else if（record.idrecordingtype==5）{
grid.manage\u单元格=新的manage\u单元格({
项目：newhid.cpt.formFluid（）的新名称
});
var val=record2.get（fieldName）；
var trim=val.replace（/\s*\/\s*/g，“/”；
var val2=修剪分割（“/”）；
控制台。原木（修剪）；
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\u unit\u value'）；
idunit.store.removeAll（）；
idunit.store.load({
参数：{
“idunit”：record.idunit
}
  <div>
    <span>Rating</span>
    <span>Color</span>
    <span>Ferrous</span>
  </div>
  <div>
    <span>val1</span>
    <span>val2</span>
    <span>val3</span>
  </div>

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

css: 'table-ish',