Grid Column Width [Résolu]

[NicoTheDude]

Bonjour à tous,

J'utilise ExtJs en version 4.02a
J'ai un Grid Panel avec trois colonnes. Les deux premières vont contenir des données de taille fixe. La troisième par contre peut contenir une String très longue.
Le GridPanel est inclus dans mon conteneur global.
Je souhaiterais savoir comment faire pour avoir un gridPanel qui fitte bien avec le conteneur global, comment gérer la largeur de ma dernière colonne et comment faire apparaitre une scrollbar dès que le contenu de cette colonne est trop long pour tenir dans celle-ci.
J'ai essayé de nombreuses choses plus ou moins inefficaces en jouant sur les minWidth, maxWidth, en utilisant cela avec des flex, en essayant forceFit à true etc...
Mais je n'ai jamais réussi à obtenir ce que je veux.

Quelqu'un aurait il une piste à me suggérer?

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Ext.define('AM.view.pathlist.PathList', {
 
    extend : 'Ext.grid.Panel',
    title:'Path Explored',
    layout : 'fit',
    autoScroll : true,
    columns: [
        {header: 'Prefix Id',  dataIndex: 'PrefixId', flex:0.05        },
        {header: 'Status',  dataIndex: 'PrefixStatus'        },
        {header: 'Path Prefix', dataIndex: 'Prefix',sortable: true, flex:1, autoScroll : true }
    ],
    dockedItems: [{
       xtype: 'pagingtoolbar',
       pageSize: 30,
       height : 30,
       store: "PathList",   // same store GridPanel is using
       dock: 'bottom',
       displayInfo: true,
       displayMsg: 'Displaying results {0} - {1} of {2}',
        emptyMsg: "No results to display"
    }],
    store: "PathList"
});

[abraxis]

Bonjour,

Le plus simple je pense étant de mettre un tooltips sur les cellules de ton tableau. En passant la souris dessus tu verrais tout le texte.
Sinon tu peu écrire sur plusieurs ligne dans ton tableau (par contre je ne sais plus comment) ^^

[NicoTheDude]

Merci pour ces deux pistes très intéressantes.
Pour l'écriture sur plusieurs lignes, quelqu'un sait il comment faire? J'avais cherché mais je n'avais pas trouvé.
Je vais me renseigner sur l'utilisation de tooltips.
Merci!

[abraxis]

Je viens de trouver ça pour l'écriture sur plusieurs lignes:
http://www.sencha.com/forum/showthre...-cell-contents

Et ceci pour les tooltips dans un grid :
http://www.hbensalem.com/javascript/...p-to-grid-row/

[NicoTheDude]

J'ai ajouté ceci dans mon CSS pour créer le multi-lignes sur les cellules de mon tableau :

Code :

1
2
3
4
5
6
7
 
.x-grid-cell-inner {
                overflow: visible;
                white-space: normal !important;
                word-wrap: break-word;
                word-break: break-all;
            }

Pour ne créer cet effet que sur une seule colonne, il suffit de faire ainsi en remplaçant "idColumn" ci-dessous par l'id de colonne de la grid :

Code :

1
2
3
4
5
6
7
 
.x-grid-cell-idColumn .x-grid-cell-inner {
                overflow: visible;
                white-space: normal !important;
                word-wrap: break-word;
                word-break: break-all;
            }

Merci beaucoup Abraxis!