web-dev-qa-db-fra.com

Cellules de grille de retour à la ligne dans Ext JS

(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.

extjsgridword-wrap
29
richardtallent

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.

18
Jonathan Julian

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           
}]
74
Jack Kleinman

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;
}
13
CTarczon

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;
        }
    }
]
4
Tiago Sippert

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.

1
Tarabass

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.

1
Augustine Joseph