ExtJS4 - Grid, ActionColumn - Read/Unread

Version imprimable

Salut à tous,

J'ai une Grid dans ma vue qui contient une colonne Read/UnRead.
Je voudrais faire comme dans un lecteur de mail qui affiche une icone verte quand le mail est non lu et grise quand il est lu.
J'y arrive presque mais hélas l'icone de la premiere ligne de mon tableau est toujours vide et cela se decale d'une ligne (pour uniquement la colonne Action)

voici ce que j'ai fait:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
                    xtype   : 'actioncolumn',
                    width   : 50,
                    align   : 'center',
                    items   : [{
                                //icon: 'resources/icons/unread.png',
                                getClass    : function (value, meta, record, rowIndex, colIndex, store) {
console.log(this.items);
 
                                    if (record.get('isread')) {
                                        this.items[0].tooltip   = 'Click to Mask as a Unread Notification' + rowIndex;
                                        this.items[0].icon      = 'resources/icons/read.png';
                                    } else {
                                        this.items[0].tooltip   = 'Click to Mask as an Read Notification'+ rowIndex;
                                        this.items[0].icon      = 'resources/icons/unread.png';
                                    }
                                    return value;
                                }
                    }]
                }

si j'ai 3 enregistrements :
read
unread
read

j'ai donc en visu dans ma grille et sur la colonne Action
vide (pas d'icone)
read
unread

un console.log de this.items me donne:

Code:

1
2
3
4
5
 [Object { hasActionConfiguration=true, handler=function(), getClass=function(), plus...}]
WinNoti...7221009 (ligne 49)
[Object { hasActionConfiguration=true, tooltip="Click to Mask as an Read Notification0", icon="resources/icons/unread.png", plus...}]
WinNoti...7221009 (ligne 49)
[Object { hasActionConfiguration=true, tooltip="Click to Mask as a Unread Notification1", icon="resources/icons/read.png", plus...}]

On voit bien que j'ai mes 3 passages mais que le premier est vide?!
Et j'ai ajouté volontairement le + rowIndex dans le tooltip pour voir ce que j'avais comme valeur, il y a aussi un décallage de 1 là.

Une idée ?

je ne veux pas utiliser une simple colonne car il y a plusieurs avantages à une ActionColumn comme par exemple le fait de ne pas avoir la sélection de la ligne,
d'avoir le curseur qui change etc...

Des idées ?

je ne trouve pas de solutions à mon problème sur Google.

25/09/2014, 14h36
Bruno13

Alors pour info, dans une colonne "non action" si l'on veut changer le pointer dans le renderer il faut:

Code:

metadata.style = 'cursor: pointer;';

il me reste plus qu'à trouver comment ne pas sélectionner la ligne, ou alors résoudre le problème de l'ActionColumn qui commence à la ligne 2.

Je précise une chose c'est que les autres colonnes de ma grille sont parfaitement bien remplies, et il n'y a pas de décalage.

Yesss :)

En fait il ne faut pas utiliser le getClass mais un renderer !
De plus le getClass est dans items[...] alors que le renderer est sur la colonne :)

Voici la solution !

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
                {
                    xtype   : 'actioncolumn',
                    dataIndex: 'isread',
                    width   : 50,
                    align   : 'center',
                    items   : [{
                                handler     : function(view, rowIndex, colIndex, item, e) {
                                                this.up('grid').fireEvent('itemactionclick', this, 'read', view, rowIndex, colIndex, item, e);
                                }
                    }],
                    renderer: function (value, meta, record, rowIndex, colIndex, store) {
                                    // This method can also be used to set the tooltip dynamically
                                    if (value) {
                                        this.items[0].tooltip   = 'Click to Mask as a Unread Notification - RowIndex: ' + rowIndex;
                                        this.items[0].icon      = 'resources/icons/read.png';
                                    } else {
                                        this.items[0].tooltip   = 'Click to Mask as an Read Notification - RowIndex: ' + rowIndex;
                                        this.items[0].icon      = 'resources/icons/unread.png';
                                    }
                                    return value;
                                }
                },

il te faut passer par un renderer

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
xtype   : 'actioncolumn',
width   : 50,
align   : 'center',
renderer: function (value, metadata, record, rowIndex, colIndex, store) {
  if (value) {
    this.items[0].tooltip   = 'Click to Mask as a Unread Notification - RowIndex: ' + rowIndex;
    this.items[0].icon      = 'resources/icons/read.png';
  } else {
    this.items[0].tooltip   = 'Click to Mask as an Read Notification - RowIndex: ' + rowIndex;
    this.items[0].icon      = 'resources/icons/unread.png';
  }
  metadata.style = 'cursor: pointer;';
  return value;
},
items   : [{}]

A+JYT

25/09/2014, 14h52
Bruno13

Salut Sekaijin :)

effectivement j'ai trouvé la solution quelques secondes avant votre post !

En tout cas merci pour votre ré-activité, c'est très appréciable car ExtJS il n'y a pas beaucoup d'endroit où trouver de l'aide "humaine" :)