htmlテーブルをレンダリングするときにcellclickイベントが機能しない

Question

グリッドパネルがあり、特定の列に対してレンダラを使用しています。また、clickを処理するためにcellclickも使用します。

レンダラの設定では、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); 
    } 
}); 

誰かが私を助けてくださいことはできますか？

事前に感謝..

Answer 1

私が思い出すと、セルがクリックされたかを決定する際に、extは、いくつかの仮定をします。 1つの仮定は、グリッド内の唯一のテーブルがグリッドによってレンダリングされることです。つまり、レンダラー内のテーブルを使用すると、clickイベントを生成するコードが混乱することになります。幸いにも、あなたはテーブルなしで同じ効果を得ることができます。テンプレートについては、このような

てみてください何か：

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

があなたのページにこのCSSを追加

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

はinclodeためにあなたの列定義を変更します。

css: 'table-ish', 

警告：私はExtがこのコンピュータで作業していないので、いくつかの推測ですが、あなたはしばらく待っていましたので、少なくとも私はこれを投稿すると思いました。