Discussion :

[Bruno13]

Bonjour à tous,

Je n'arrive pas à afficher en 24*24 mon icon dans une ActionColumn avec sa vraie taille, elle est redimensionnée directement en 16*16.
(et elle est bien redimensionnée, elle n'est pas rognée et il n'en manque pas un bout )

Est-il possible de changer la taille par défaut de l’icône dans une ActionColumn d'une Grid?
Je n'ai rien trouvé à ce sujet.

Pour info, j'ai essayé en passant par le metaData.css de mon renderer mais cela ne me plait pas, l’icône est en background et la sélection n'est pas belle.

voici mon bout de code de ma colonne:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
                { 
                    xtype       : 'actioncolumn', 
                    text        : 'Active',  
                    flex        : 1, 
                    dataIndex   : 'notif', 
                    align       : 'center',
                    items   : [
                        {
                            handler     : function(view, rowIndex, colIndex, item, e) {
                                this.up('grid').fireEvent('itemactionclick', this, 'active', view, rowIndex, colIndex, item, e);
                            }
                        }
                    ],
                    renderer: function (value) {
                        // This method can also be used to set the tooltip dynamically
                        if (value) {
                            this.items[0].tooltip   = 'Click to turn-on alert';
                            this.items[0].icon      = 'resources/iconex_o/blue_dark_grey/24x24/switch3_off.png';
                        } else {
                            this.items[0].tooltip   = 'Click to turn-off alert';
                            this.items[0].icon      = 'resources/iconex_o/blue_dark_grey/24x24/switch3_on.png';
                        }
                    }

D'avance merci pour vos conseils,

Bruno

[Bruno13]

Voici la solution que j'ai trouvé tout seul...

dans un css, je mets:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.myManagerClass {
    height : 24px;
    width  : 24px;
}

ensuite, dans le items, j'ajoute:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
...
items   : [
                        {
                            iconCls     : 'myManagerClass',
....

Seul petit hic, l'image est bien vertical-align mais pas les autres textes des autres colonnes.
Pour ce petit prob, j'ai ajouté dans mon css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.mygridalertcss .x-grid-cell-inner{
    vertical-align  : middle;
    line-height     : 24px;
}

et défini dans ma Grid:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

            cls         : 'mygridalertcss',

voilà j'espère que cela pourra servir à quelqu'un sait on jamais