Comment afficher un champ très long dans un ExtJS GridPanel

Question

J'ai ajusté cet exemple de grille ExtJS avec panneau détaillé à mes besoins.

Cela fonctionne plutôt bien mais maintenant je voudrais ajouter cette fonctionnalité :

Dans ma grille, l'un des champs peut contenir un texte très long (c'est ainsi qu'il est récupéré de mon magasin). Je voudrais présenter uniquement les premiers caractères N pour ce champ et seulement lorsque l'utilisateur fait quelque chose (passe la souris sur le champ/clique dessus/double-clique dessus/...) lui présenter la valeur complète (peut-être dans une fenêtre ou quelque chose de plus soigné).

J'ai réussi à définir un rendu qui présente uniquement les premiers caractères N comme ceci :

var my_grid = new Ext.grid.GridPanel({
    store: my_store,
    columns: [
        {header: "description", width: 400, dataIndex: 'description', sortable: true, 
            renderer: function(val, meta, record) {
            var tpl;
            if (val.length > 400) 
            {
                val = val.substr(0, 400) + '...';
            }
            tpl = new Ext.Template('{val}');

            return tpl.apply(
            {
                val: val
            });
        }},

        {header: "some_other_column_header", width: 100, dataIndex: 'blah-blah',     sortable: true}
        ],
    sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
    height:200,
    split: true,
    region: 'north'
});

Ma question est comment ajouter une fenêtre/autre option avec le texte complet lorsque l'utilisateur fait quelque chose. Je suppose que je devrais ajouter un auditeur à la grille mais je ne suis pas sûr comment écrire cet auditeur...

Merci !!!

Answer 1

Pour afficher le texte entièrement dans la cellule :

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

Answer 2

Essayez d'ajouter des écouteurs 'cellclick'

listeners : {   
    'cellclick' : function(grid, rowIndex, columnIndex, e) {
        var record = grid.getStore().getAt(rowIndex);  // Obtenir l'enregistrement
        var fieldName = grid.getColumnModel().getDataIndex(columnIndex); // Obtenir le nom du champ
        var data = record.get(fieldName);
        newWin(data);
    }
}

ou cela peut être fait à partir du rendu également

utilisez la fonction ellipsis de ext dans le rendu référence ellipsis

var rendererData = function(val, p, rec){
    return ''+Ext.util.Format.ellipsis(val,50)+'';
}

function newWin(val){
        new Ext.Window({
            height : 100,
            widht  : 100,
            title  : 'title',
            items  : [{xtye:'displayfield',html:val}]
        }).show();
    }