¿Cómo cambiar el color del texto de una sola fila en una grilla ExtJS?

Question

He creado la siguiente grilla ExtJS.

Quiero cambiar el color del texto de todas las celdas en la segunda fila.

Sin embargo, sólo puedo encontrar la manera de cambiar el color de todos células en todos filas incluyendo el texto del encabezado, como se muestra aquí:

var myData = [ 
    [4, 'This is a whole bunch of text that is going to be word-wrapped inside this column.', 0.24, 3.0, '2010-11-17 08:31:12'], 
    [16, 'Computer2-this row should be red', 0.28, 2.7, '2010-11-14 08:31:12'], 
    [5, 'Network1', 0.02, 2.5, '2010-11-12 08:31:12'], 
    [1, 'Network2', 0.01, 4.1, '2010-11-11 08:31:12'], 
    [12, 'Other', 0.42, 5.0, '2010-11-04 08:31:12'] 
]; 

var myReader = new Ext.data.ArrayReader({}, [{ 
     name: 'id', 
     type: 'int' 
    }, { 
     name: 'object', 
     type: 'object' 
    }, { 
     name: 'status', 
     type: 'float' 
    }, { 
     name: 'rank', 
     type: 'float' 
    }, { 
     name: 'lastChange', 
     type: 'date', 
     dateFormat: 'Y-m-d H:i:s' 
    }]); 

var grid = new Ext.grid.GridPanel({ 
    region: 'center', 
    style: 'color:red', //makes ALL text in grid red, I only want one row to be red 
    store: new Ext.data.Store({ 
     data: myData, 
     reader: myReader 
    }), 
    columns: [{ 
      header: 'ID', 
      width: 50, 
      sortable: true, 
      dataIndex: 'id', 

      hidden: false 

     }, { 
      header: 'Object', 
      width: 120, 
      sortable: true, 
      dataIndex: 'object', 
      renderer: columnWrap 

     }, { 
      header: 'Status', 
      width: 90, 
      sortable: true, 
      dataIndex: 'status' 
     }, { 
      header: 'Rank', 
      width: 90, 
      sortable: true, 
      dataIndex: 'rank' 
     }, { 
      header: 'Last Updated', 
      width: 120, 
      sortable: true, 
      renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s'), 
      dataIndex: 'lastChange' 
     }], 
    viewConfig: { 
     forceFit: true 
    }, 
    title: 'Computer Information', 
    width: 500, 
    autoHeight: true, 
    frame: true, 
    listeners: { 
     'rowdblclick': function(grid, index, rec){ 
      var id = grid.getSelectionModel().getSelected().json[0]; 
      go_to_page('edit_item', 'id=' + id); 
     } 
    } 
}); 

¿Qué tengo que hacer para cambiar el color del texto de solo las celdas en la segunda fila?

Answer 1

no estoy seguro de si esto ayuda, pero puede intentarlo. Intenté localmente, pero cambió el color de todos los personajes en la segunda fila.

Añadir escucha a la red:

listeners:{ 
    viewready: function(g){ 
     g.getView().getRow(1).style.color="#f30"; 
    } 
} 

"Cuando viewready, usted puede obtener div de la fila utilizando getRow() método de GridView Después de que es normal Javascript de asignación de colores (o la adición extra clase, si. quiere)

Saludos

EDITAR

Me doy cuenta de que no está funcionando si su tienda está recuperando datos de forma remota. La vista está lista pero los datos no están listos. Este método fallaría.

Answer 2

Desea reemplazar getRowClass, que se pasa al viewConfig de GridPanel. Un ejemplo se proporciona en la documentación de la API de GridPanel:

viewConfig: { 
     forceFit: true, 

    // Return CSS class to apply to rows depending upon data values 
     getRowClass: function(record, index) { 
      var c = record.get('change'); 
      if (c < 0) { 
       return 'price-fall'; 
      } else if (c > 0) { 
       return 'price-rise'; 
      } 
     } 
    }, 

GridView contiene el método, a fin de buscar allí en la API para obtener más información:

getRowClass(Record record, Number index, Object rowParams, Store store) 

anular esta función para aplicar personalizados clases CSS a filas durante la representación. También puede proporcionar los parámetros personalizados en la plantilla de fila para la fila actual para personalizar cómo se representa utilizando el parámetro rowParams. Esta función debe devolver el nombre de la clase CSS (o la cadena vacía '' para ninguno) que se agregará al divisor de la fila. Para aplicar nombres de clase múltiple , simplemente devuélvalos delimitados por espacios dentro de la cadena (por ejemplo, 'my-class another-class').

Puede aplicar el CSS a una determinada fila utilizando el argumento index.