Come modificare il colore del testo di una sola riga in una griglia ExtJS?

Question

Ho creato la seguente griglia ExtJS.

Desidero modificare il colore del testo di tutte le celle nella riga secondo.

Tuttavia, posso solo trovare il modo di cambiare il colore di tutti celle in tutti righe incluso il testo di intestazione, come mostrato qui:

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

Che cosa devo fare per cambia il colore del testo solo delle celle nella seconda fila?

Answer 1

non so se questo aiuta, ma si può provare. Ho provato localmente, cambia il colore di tutti i personaggi nella seconda fila.

Aggiungere ascoltatore alla griglia:

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

"Quando viewready, è possibile ottenere div della riga utilizzando getRow() metodo dal GridView Dopo che è normale JavaScript di assegnare i colori (o l'aggiunta di classe in più, se si. vogliono)

Acclamazioni

EDIT

Mi rendo conto che non funziona se il tuo negozio sta recuperando i dati da remoto. La vista è pronta ma i dati non sono pronti. Questo metodo fallirebbe.

Answer 2

Si desidera ignorare getRowClass, che viene passato in GridPanel viewConfig. Un esempio è fornito nella documentazione API di 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 il metodo, in modo da guardare lì in API per ulteriori informazioni:

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

override questa funzione per applicare personalizzati classi CSS per righe durante il rendering. È inoltre possibile fornire i parametri personalizzati al modello di riga per la riga corrente per personalizzare la modalità di rendering utilizzando il parametro rowParams. Questa funzione dovrebbe restituire il nome della classe CSS (o una stringa vuota '' per nessuno) che verrà aggiunto al div di spostamento della riga. Per applicare più nomi di classe , è sufficiente restituirli nello spazio delimitato da spazi all'interno della stringa (ad es. "My-class other-class").

È possibile applicare il CSS a una determinata riga utilizzando l'argomento index.