(Ce n'est pas une question en soi, je documente une solution que j'ai trouvée en utilisant Ext JS 3.1.0. Mais, n'hésitez pas à répondre si vous connaissez une meilleure solution!)
La configuration de colonne pour un objet Grid Ext JS n'a pas de méthode native pour autoriser le texte encapsulé dans Word, mais il existe une propriété css
pour remplacer le CSS en ligne des éléments TD
créés par le la grille.
Malheureusement, les éléments TD
contiennent un élément DIV
enveloppant le contenu, et que DIV
est défini sur white-space:nowrap
par la feuille de style d'Ext JS, donc remplacer le CSS TD
ne sert à rien.
J'ai ajouté ce qui suit à mon fichier CSS principal, un simple correctif qui apparaît pour ne casser aucune fonctionnalité de la grille, mais autorise tout white-space
paramètre que j'applique au TD pour passer au DIV
.
.x-grid3-cell {
/* TD is defaulted to Word-wrap. Turn it off so
it can be turned on for specific columns. */
white-space:nowrap;
}
.x-grid3-cell-inner {
/* Inherit DIV's white-space from TD parent, since
DIV's inline style is not accessible in the column
definition. */
white-space:inherit;
}
YMMV, mais cela fonctionne pour moi, voulait le diffuser comme solution car je ne pouvais pas trouver de solution de travail en recherchant les Interwebs.
Pas une "meilleure solution", mais une solution similaire. J'ai récemment dû autoriser TOUTES les cellules de chaque grille à s'habiller. J'ai utilisé un correctif CSS similaire (c'était pour Ext JS 2.2.1):
.x-grid3-cell-inner, .x-grid3-hd-inner {
white-space: normal; /* changed from nowrap */
}
Je n'ai pas pris la peine de définir un style sur le td, je suis juste allé à droite pour la classe de cellule.
Si vous souhaitez uniquement appliquer l'habillage à une colonne, vous pouvez ajouter un rendu personnalisé.
Voici la fonction à ajouter:
function columnWrap(val){
return '<div style="white-space:normal !important;">'+ val +'</div>';
}
Ajoutez ensuite le renderer: columnWrap
à chaque colonne que vous souhaitez encapsuler
new Ext.grid.GridPanel({
[...],
columns:[{
id: 'someID',
header: "someHeader",
dataIndex: 'someID',
hidden: false,
sortable: true,
renderer: columnWrap
}]
Si vous souhaitez uniquement encapsuler du texte dans certaines colonnes et utilisez ExtJS 4, vous pouvez spécifier une classe CSS pour les cellules d'une colonne:
{
text: 'My Column',
dataIndex: 'data',
tdCls: 'wrap'
}
Et dans votre fichier CSS:
.wrap .x-grid-cell-inner {
white-space: normal;
}
Une autre solution est que:
columns : [
{
header: 'Header',
dataIndex : 'text',
renderer: function(value, metaData, record, rowIndex, colIndex, view) {
metaData.style = "white-space: normal;";
return value;
}
}
]
utilisation
cellWrap: true
Si vous souhaitez toujours utiliser css, essayez toujours de travailler avec les interfaces utilisateur, les variables, etc. dans les thèmes, ou définissez le style avec la propriété style.
La meilleure façon de procéder est de définir le cellWrap sur true comme ci-dessous.
cellWrap: true
Son fonctionne bien dans EXTJS 5.0.