我能顏色的ExtJS網格中的特定行下面是我從this answer拿到代碼：什麼會導致g.getView（）。getRow（0）.style.color =「red」不能在ExtJS Grid中運行？

enter image description here

然而，在實際應用中，完全相同的代碼並不顯示顏色：

enter image description here

不同的是，在第二個例子中，代碼被通過AJAX加載到較大的應用程序，因此它是難以用螢火蟲調試它。

我敢肯定執行viewready函數中得到，因爲我可以把在那裏的警報，並認爲它是執行，但g.getView().getRow(2).style.color='red';沒有被某種原因執行（或正在出於某種原因復位）。

myData變量在第二個示例中與第一個示例中的變量相同（不是從外部源加載），applicatoin只是使用PHP構建此JavaScript代碼。

什麼可能是測試示例自行工作的原因，但此代碼在較大的應用程序中不起作用？

var myData = [ 
    ['newfile.csv', 'CSV', 15313, '2011-01-24 09:49:55', 'newfile', '2011-01-24 14:40:21', 'auf letztem Stand'], 
    ['test333.csv', 'CSV', 15313, '2011-01-24 09:49:56', 'test333', '2011-01-24 14:40:19', 'auf letztem Stand'], 
    ['test.xls (sheet1)', 'XLS', 7168, '2011-01-24 09:49:56', 'test__sheet1', '2011-01-24 14:40:23', 'auf letztem Stand'], 
    ['test.xls (sheet2)', 'XLS', 7168, '2011-01-24 09:49:56', 'test__sheet2', '2011-01-24 14:40:25', 'auf letztem Stand'], 
    ['test.xls (Tabelle3)', 'XLS', 7168, '2011-01-24 09:49:56', 'test__Tabelle3', '2011-01-24 15:35:07', 'auf letztem Stand'] 
]; 
var myReader = new Ext.data.ArrayReader({}, [{ 
     name: 'name', 
     type: 'string' 
    }, { 
     name: 'kind', 
     type: 'string' 
    }, { 
     name: 'file_size', 
     type: 'int' 
    }, { 
     name: 'when_file_copied', 
      dateFormat: 'Y-m-d H:i:s', 
     type: 'date' 
    }, { 
     name: 'table_name', 
     type: 'string' 
    }, { 
     name: 'when_table_created', 
     type: 'string' 
    }, { 
     name: 'status', 
     type: 'string' 
    }]); 

var grid = new Ext.grid.GridPanel({ 
    region: 'center', 
    style: 'margin: 10px', 
    store: new Ext.data.Store({ 
     data: myData, 
     reader: myReader 
    }), 
    columns: [{ 
      header: 'Worksheets zum importieren', 
      width: 300, 
      sortable: true, 
      dataIndex: 'name' 
     }, { 
      header: 'Typ', 
      width: 50, 
      sortable: true, 
      dataIndex: 'kind' 
     }, { 
      header: 'Größe (bytes)', 
      sortable: true, 
      dataIndex: 'file_size' 
     }, { 
      header: 'Wann Datei kopiert', 
      width: 150, 
      sortable: true, 
      renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s'), 
      dataIndex: 'when_file_copied' 
     }, { 
      header: 'MySQL Tabellenname', 
      width: 300, 
      sortable: true, 
      dataIndex: 'table_name' 
     }, { 
      header: 'Wann Tabelle erstellt', 
      width: 160, 
      sortable: true, 
      dataIndex: 'when_table_created' 
     }, { 
      header: 'Status', 
      width: 300, 
      sortable: true, 
      dataIndex: 'status' 
     }], 
    viewConfig: { 
    }, 
    title: 'Gültige Dateien (.csv und .xsl/.xslx unter 4MB) in Importverzeichnis (webdev: /data/storage/test/original_excel)', 
    width: 1300, 
    listeners: { 
     'rowdblclick': function(grid_smart_worksheets, index, rec){ 
      var id = grid_smart_worksheets.getSelectionModel().getSelected().json[0]; 
      replace_region_with_uri_content('backend/application/importmanager/single', targetRegion, 'id='+id); 
     }, 
     'viewready' : function(g) { 
      g.getView().getRow(0).style.color="red"; 
      g.getView().getRow(2).style.color="#aaa"; 
     } 
    }, 
    autoHeight: true, 
    frame: true 
});

回答

下面Gajahlemu的代碼工作得很好，因爲它是在我的演示，但在我的應用我不得不修改其應用到內部TD，以避免與其他樣式衝突的CSS，所以這個作品例如：

.grid-row-highlight td { 
    background-color: yellow; 
    color: red; 
    font-weight: bold; 
}

enter image description here

來源

2011-01-24 Edward Tanguay

這可能是因爲回答你的鏈接是一個黑客？在上一個問題中，將樣式應用於單個行時，我已經提供了使用該方法的方法。你爲什麼不放棄它，讓我們知道它是否有用。 – McStretch 2011-01-24 15:41:11

請考慮：您的數據是遠程加載的（使用ajax）或者您的數據太大，因爲這可能是數據之間存在時間延遲加載和數據呈現，因此呼籲viewready處理函數可以在

g.getView().getRow(2)

將失敗，因爲「行」是不存在的，但（不確定）

嘗試使用McStretch解決方案的要好得多。下面是我的榜樣如何實現：

.... 
viewConfig: { 
    getRowClass: function(record, rowIndex, rp, ds){ 
     if(rowIndex == 2){ 
      return 'red-row'; 
     } else { 
      return ''; 
     } 
    } 
}, 
title: 'Gültige Dateien (.csv und .xsl/.xslx unter 4MB) in Importverzeichnis (webdev: /data/storage/test/original_excel)', 
width: 1300, 
listeners: { 
    'rowdblclick': function(grid_smart_worksheets, index, rec){ 
     var id = grid_smart_worksheets.getSelectionModel().getSelected().json[0]; 
     replace_region_with_uri_content('backend/application/importmanager/single', targetRegion, 'id='+id); 
    }, 
}, 
....

PS：不要忘了在你的CSS文件或<style>標籤之間申報類「紅色行」，即

.red-row { 
    color: red; 
}

來源

2011-01-24 19:21:43 Gajahlemu

店後添加事件加載數據（ 'dataloaded'），甲肝e網格通過改變顏色來改變顏色，就像現在使用'viewready'一樣

來源

2011-01-24 18:20:15 bensiu

什麼會導致g.getView（）。getRow（0）.style.color =「red」不能在ExtJS Grid中運行？

回答

回答

相關問題