Cellules de grille Word-wrap dans Ext JS

Question

(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 la colonne pour un objet grille Ext JS n'a pas de manière native pour permettre le texte de reformaté, mais il y a une propriété css pour remplacer le CSS en ligne des TD éléments créés par la grille.

Malheureusement, les TD éléments contiennent un élément DIV enveloppant le contenu, et que DIV est réglé sur white-space:nowrap par feuille de style Ext JS, remplaçant ainsi le TD CSS ne sert à rien.

j'ajouté ce qui suit à mon fichier CSS, une solution simple qui semble pour ne pas casser toutes les fonctionnalités de la grille, mais permet tout réglage white-space je demande à la TD de passer à travers la 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 ça marche pour moi, voulait le faire là-bas comme une solution car je ne pouvais pas trouver une solution de travail en recherchant le Interwebs.

Answer 1

Pas une "meilleure solution", mais une similaire. J'ai récemment dû autoriser toutes les cellules dans chaque grille pour envelopper. J'ai utilisé une solution à base de CSS similaire (ce qui était pour Ext JS 2.2.1):

.x-grid3-cell-inner, .x-grid3-hd-inner { 
    white-space: normal; /* changed from nowrap */ 
} 

Je ne l'ai pas pris la peine avec la fixation d'un style sur le td, je suis allé à droite pour la classe cellulaire.

Answer 2

Si vous souhaitez uniquement appliquer l'habillage à une colonne, vous pouvez ajouter un rendu personnalisé.

Voici la fonction d'ajouter:

function columnWrap(val){ 
    return '<div style="white-space:normal !important;">'+ val +'</div>'; 
} 

Ensuite, ajoutez la renderer: columnWrap à chaque colonne que vous voulez envelopper

new Ext.grid.GridPanel({ 
[...], 
columns:[{ 
    id: 'someID', 
    header: "someHeader", 
    dataIndex: 'someID', 
    hidden: false, 
    sortable: true, 
    renderer: columnWrap   
}] 

Answer 3

Si vous voulez seulement envelopper le texte dans certaines colonnes et utilisez ExtJS 4, vous pouvez spécifier une classe CSS pour les cellules dans une colonne:

{ 
    text: 'My Column', 
    dataIndex: 'data', 
    tdCls: 'wrap' 
} 

Et dans y notre fichier CSS:

.wrap .x-grid-cell-inner { 
    white-space: normal; 
} 

Answer 4

Autre solution est que:

columns : [ 
    { 
     header: 'Header', 
     dataIndex : 'text', 
     renderer: function(value, metaData, record, rowIndex, colIndex, view) { 
      metaData.style = "white-space: normal;"; 
      return value; 
     } 
    } 
] 

Answer 5

La meilleure façon de le faire est en définissant la cellWrap true comme ci-dessous.

cellWrap: true

Son travail bien ExtJS 5.0.

Answer 6

utilisation

cellWrap: true 

Si vous voulez continuer à utiliser toujours essayer de css travailler avec les ui, les variables, etc., dans des thèmes, ou définir le style avec la propriété de style.