1. 首頁
  2. 問答
  3. 當渲染html表格時，cellclick事件不起作用

當渲染html表格時，cellclick事件不起作用

2010-12-19 59 views
1

我有一個網格面板，並且我正在使用某些列的渲染器..我也使用cellclick來處理點擊。當渲染html表格時，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); 
    } 
});

有人可以幫我嗎？

在此先感謝..

來源

2010-12-19 Yagi

+0

目前尚不清楚您的cellclick處理程序正在連接到哪裏。它是在分機網格上還是在你正在渲染的桌子上？它不會出現在您的代碼示例中。 – Hemlock 2010-12-19 13:03:34

+0

感謝Hemlock的回覆..，我真的等待有人回覆我的問題。 我上面編輯了我的代碼。 我的cellclick處理程序在我的Ext網格上，我渲染的表只是將我的值放在某個單元格上，因爲我在單元格上有一些值。 關於「實際閱讀」單元格我有3個值（評分，顏色和黑色）用「，」或「/」分隔，如下所示： A /黃色/ 34 這就是爲什麼我需要呈現HTML表格才能放置價值。 – Yagi 2010-12-20 04:59:26

回答

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',

警告：我沒有分機在這臺電腦上工作，所以一些是猜想，但你現在一直在等待，所以我想我至少會發布這個。

來源

2010-12-21 02:45:43 Hemlock

+0

這就是問題所在，我將它轉換爲單元格中的div，現在點擊處理程序正常工作。 – 2012-08-27 20:25:49

相關問題

 相關問題