In ExtJS, come aggiungere una classe CSS personalizzata alle righe della griglia di dati?

Come aggiungere classi CSS personalizzate alle righe in una griglia di dati (Ext.grid.Panel)?In ExtJS, come aggiungere una classe CSS personalizzata alle righe della griglia di dati?

Sto usando ExtJS 4.0.

fonte

2011-10-03 Erik Allik

Si può anche dare un'occhiata a questa domanda: http://stackoverflow.com/questions/7471223/extjs-4-cell-renderer-problem/7476057#7476057 –

Il modo per farlo è quello di definire viewConfig sulla griglia:

Ext.create('Ext.grid.Panel', { 
    ... 

    viewConfig: { 
     getRowClass: function(record, index, rowParams, store) { 
      return record.get('someattr') === 'somevalue') ? 'someclass' : ''; 
     } 
    }, 

    ... 
});

fonte

2011-10-04 16:55:34

Vedere anche la documentazione: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.view.Table-method-getRowClass –

Si potrebbe fare qualcosa di simile:

Ext.fly(myGrid.getView().getRow(0)).addClass('myClass');

Naturalmente si potrebbe sostituire la chiamata getRow() per un'altra cella, o si potrebbe ciclo attraverso tutte le righe e aggiungere in modo appropriato.

E allora si potrebbe lo stile che oltre al CSS di default, facendo:

.x-grid3-row-selected .myClass { 
    background-color: blue !important; 
}

V'è anche un metodo privato di GridView chiamato addRowClass. È possibile utilizzare questo per aggiungere una classe per le righe così facendo:

grid.getView().addRowClass(rowId, 'myClass');

// private - use getRowClass to apply custom row classes 
addRowClass : function(rowId, cls) { 
    var row = this.getRow(rowId); 
    if (row) { 
     this.fly(row).addClass(cls); 
    } 
},

fonte

2011-10-03 17:10:00 dmackerman

Nel vostro initComponent() del vostro Ext.grid.Panel utilizzo getRowClass() come segue:

initComponent: function(){ 
     var me = this; 
     me.callParent(arguments); 
     me.getView().getRowClass = function(record, rowIndex, rowParams, store) { 
      if (/* some check here based on the input */) { 
       return 'myRowClass'; 
      } 
     }; 
    }

Ciò ignora sostanzialmente la getRowClass() funzione del sottostante Ext.grid.View che viene richiamato al momento del rendering per applicare qualsiasi classe personalizzata. Allora il vostro file CSS personalizzato conterrà qualcosa come:

.myRowClass .x-grid-cell {background:#FF0000; }

fonte

2011-10-03 17:29:05 LittleTreeX

Questo è certamente il modo consigliato di fare le cose e consente, come nell'esempio, la possibilità di applicare in modo condizionale una classe basata sui valori del record, che è un uso comune per overrride di getRowClass. – dougajmcdonald

Inoltre, ho scoperto che è bello definire 'getRowClass' nella configurazione' viewConfig' della griglia senza l'approccio imperativo dell'uso di 'initComponent' :) –

Questo non è il modo consigliato, si prega di utilizzare viewConfig, vedere la prima risposta. –

Usa modo più semplice

Nel vostro utilizzo della rete -

cls: 'myRowClass'

Il tuo css -

.myRowClass .x-grid-cell {background: # FF0000! Importante; }

fonte

2013-05-20 08:32:08 Kanchan

Questo non è assolutamente quello che è stato chiesto. –

Se si vuole cambiare la classe dopo che i dati è stato caricato, si può fare in questo modo:

myGridPanel.getView().removeRowCls(rowIndex,"old class"); 
myGridPanel.getView().addRowCls(rowIndex,"new class");

Qui, rowIndex è la riga selezionata, che si può ottenere in alcune funzioni di evento (come "selezionare"). Usando questo, puoi cambiare il CSS della riga dopo aver fatto clic su di esso.

fonte

2014-11-11 17:23:23

In ExtJS, come aggiungere una classe CSS personalizzata alle righe della griglia di dati?

risposta

Problemi correlati