Witam Dzisiejszy post nie będzie związany z platformą .NET, lecz z javascriptowym frameworkiem Extjs w wersji 4.1. Jako, że ostatnio w pracy poświęcam dużo czasu na pisanie w wyżej wymienionej technologii postanowiłem zaprezentować, w jaki sposób zmienić styl konkretnej komórki w gridzie. Zacznijmy od przygotowania danych do wyświetlenia - zdefiniujmy zatem stora, który będzie przechowywał informacje mające zostać zaprezentowane na gridzie.

1
Ext.create('Ext.data.Store', {
2
    storeId:'itemsStore',
3
    fields:['name', 'email', 'change'],
4
    data:{'items':[
5
        { 'name': 'LCD PLAYER',    "change":100  },
6
        { 'name': 'DVD PLAYER', "change":-20  },
7
        { 'name': 'CD PLAYER',   "change":23   },
8

9
    ]},
10
    proxy: {
11
        type: 'memory',
12
        reader: {
13
            type: 'json',
14
            root: 'items'
15
        }
16
    }
17
});

Następnie podepnijmy stora pod grida w wersji podstawowej - bez zmiany stylu konkretnych komórek.

1
Ext.create('Ext.grid.Panel', {
2
    store: Ext.data.StoreManager.lookup('itemsStore'),
3
    columns: [
4
        { header: 'Name',  dataIndex: 'name' },
5
        { header: 'Change', dataIndex: 'change'}
6
    ],
7
    height: 200,
8
    width: 400,
9
    forceFit:true,
10
    renderTo: Ext.getBody()
11
});

W celu zmiany parametrów poszczególnych komórek grida posłużymy się tzw. rendererem. Renderer jest to funkcja, której zadaniem jest modyfikacją komórek w danej kolumnie grida. Dzięki rendererowi możemy nie tyko zmienić zawartość komórki, ale również przypisać jej osobny styl lub klasę CSS. Myślę, że renderer można porównać do conwertera znanego z technologii WPF. Funkcję renderera podłączymy pod ostatnią kolumnę. Kod po modyfikacjach będzie wyglądał w następujący sposób:

1
Ext.create('Ext.grid.Panel', {
2
    store: Ext.data.StoreManager.lookup('itemsStore'),
3
    columns: [
4
        { header: 'Name',  dataIndex: 'name' },
5
        { header: 'Change', dataIndex: 'change', renderer: function(value, metaData, record, row, col, store, gridView){
6
            if(value>0)
7
              metaData.tdCls = 'price-rise'
8
            else
9
              metaData.tdCls = 'price-fall'
10

11
             return value;
12
        }}
13
    ],
14
    height: 200,
15
    width: 400,
16

17
    renderTo: Ext.getBody()
18
});

1
.price-fall  {
2
    background-color: red !important;
3

4
}
5
.price-rise {
6
    background-color: #B0FFC5;
7
    color:green;
8
}

Zauważmy, że funkcja renderer przyjmuje kilka parametrów. Najważniejsze z nich to

• value - wartość wyświetlona w komórce grida
• metaData- obiekt dający nam dostęp do parametrów komórki (np. tdCls)
• record - record grida

W moim przypadku na podstawie wartości wyświetlanej w komórkach kolumny Change, określam czy dana komórka powinna być czerwona czy zielona. Wygląd grida przed oraz po zastosowaniu renderera przedstawiają poniższe screeny