Jak zastosować kolor tła (lub niestandardową klasę css) do kolumny w siatce - ExtJs 4?

Question

Wygląda na to, że powinno być tak proste, ale po prostu nie mogę tego zrobić (nie potrzebuję nawet tego robić dynamicznie). Na przykład załóżmy, że mam prosty 2 kolumna konfiguracja sieci tak:

columns : [  
     {header: 'USER', dataIndex: 'firstName', width:70, cls: 'red'}, 
     {header: 'CATEGORY', dataIndex: 'category', width:100} 
    ] 

Atrybut cls: 'red' wpływa tylko nagłówek i nie rzeczywista kolumny. Widziałem gdzie indziej, że należy przy użyciu niestandardowego mechanizmu renderującego (być może), ale gdy próbuję coś takiego:

{header: 'USER', dataIndex: 'firstName', width:70, 
    renderer: function(value) { 
     this.addCls('red'); 
     return value; 
    } 
} 

I jeszcze dostać nudne białe tło. Widziałem również ludzi używających definicji funkcji renderera, jak: function(value, metadata, record, rowIndex, colIndex, store), ale kiedy użyłem alert() do przetestowania parametrów wejściowych, otrzymuję undefined dla wszystkiego z wyjątkiem value, co pozwala mi sądzić, że może to było ważne tylko dla wersji przed ExtJs 4.

Próbowałem również zwrócić coś w rodzaju '<span class="red">' + value + '</span>' w mojej funkcji renderowania, ale to tylko podświetliło tekst, a nie zmieniło całe tło kolumny.

Nie chcę przesłonić domyślnych klas Ext css, ponieważ chcę zastosować kolory tła do określonej siatki w aplikacji, a nie wszystkich z nich.

Ponadto wszystkie kolumny danej siatki mogą mieć różne kolory (zwróć uwagę, że w przykładzie dodałem tylko tę klasę do pierwszej kolumny).

Załóżmy, że red jest zdefiniowany jako .red {background:#FF0000;} w moim pliku css.

Answer 1

Dodaj atrybut tdCls do definicji nagłówka kolumny, z wartością klasy CSS, której chcesz użyć.

columns : [ 
    {header: 'USER', dataIndex: 'firstName', width:70, tdCls: 'red'}, 
    {header: 'CATEGORY', dataIndex: 'category', width:100} 
] 

Answer 2

lepiej przeczytać: http://www.sencha.com/learn/grid-faq/

sekcja „Aby zmodyfikować komórek/wiersz/kolumna”

Answer 3

Choć siatki FAQ sugeruje atian25 nie stosuje się do ExtJS 4, udało mi użyć go, by poprowadzić mnie do właściwej odpowiedzi na moje pytanie.

W javascript dodać atrybut ID na swojej definicji kolumny:

{header: 'SomeHeader', id: 'myColumn' dataIndex: 'theData'} 

To będzie generować następujące klasy CSS dla wszystkich elementów td w tej kolumnie:

.x-grid-cell-myColumn 

W swojej css plik (który musi zostać załadowany po pliku Ext css) dodaj następującą definicję:

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

I bingo, masz jasne czerwone tło dla wspomnianej kolumny. Korzystając z tej samej techniki, możesz dostosować poszczególne kolumny w dowolny sposób.

UWAGA: bez użycia selektora .x-grid-table wygrywa specyfika klas "wierszy". Konieczne będzie również ponowne zdefiniowanie .x-grid-row-over, jeśli chcesz zachować efekt najechania na niestandardową kolumnę.

Answer 4

Celem jest, aby zastosować jeden CLS do kolumny, co zrobiłem z getRowClass a następnie usunąć go po 1-2 sek. Websync przesyła nowe dane co 5 sekund, więc kiedy to się zmieni w komórce, powinno być jak miganie zmienionej kolumny (komórki), która powraca do "białej" (domyślnie) przed odświeżeniem danych? Wartość przypisana do porównania nowych rekordów wynosi 0, ale w rzeczywistości jest to ostatnia wartość, która jest porównywana!