Databases
StackOverflow2013
Postsdbo
POWhat would be causing g.getView().getRow(0).style.color="red" not to function in ExtJS Grid?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhat would be causing g.getView().getRow(0).style.color="red" not to function in ExtJS Grid?
    text
    copied!<p>I was able to color specific rows of a ExtJS grid with the code below which I got from <a href="https://stackoverflow.com/questions/4782276/how-to-change-the-text-color-of-only-one-row-in-an-extjs-grid/4782425#4782425">this answer</a>:</p> <p><img src="https://i.stack.imgur.com/wmg33.png" alt="enter image description here"></p> <p>However, in the actual application, the exact same code does not show the colors:</p> <p><img src="https://i.stack.imgur.com/IFrBX.png" alt="enter image description here"></p> <p>The difference is that in the second example, the code is being loaded via AJAX into a larger application, and so it is difficult to debug it with Firebug.</p> <p>I'm sure execution gets inside the <strong>viewready</strong> function since I can put an alert in there and see that it is executed but the <code>g.getView().getRow(2).style.color='red';</code> is not being executed for some reason (or is being reset for some reason).</p> <p>The <code>myData</code> variable is the same in the second example as in the first (not being loaded from an external source), the applicatoin simply builds this javascript code with PHP.</p> <p><strong>What could be the cause of the test example working by itself but this code not functioning within the larger application?</strong></p> <pre><code>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 }); </code></pre> <h1>Answer</h1> <p>Gajahlemu's code below works well as it is in my demo but in my application I had to modify the CSS applying it to the inner <code>TD</code> to avoid conflicts with other styles, so this works for example:</p> <pre><code>.grid-row-highlight td { background-color: yellow; color: red; font-weight: bold; } </code></pre> <p><img src="https://i.stack.imgur.com/mQBkF.png" alt="enter image description here"></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload