How to display a super-long field in an ExtJS GridPanel

Question

I've adjusted this ExtJS Grid with detailed panel example to my needs.

It works rather well but now I would like to add this feature:

In my grid, one of the fields may contain a very long text (this is how it is retrieved from my store). I would like to present only the first N characters for this field and only when the user does something (hovers over the field/clicks on it/double-clicks on it/...) present him/her with the full value (maybe in a window or something neater).

I've managed to define a renderer which presents only the first N characters like so:

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('<div style="white-space:normal; word-wrap: break-word;">{val}</div>');

            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'
});

My question is how to add a window/other-option with the whole text when the user does something. I guess I should add a listener to the grid but I am not sure how to write this listener...

Thanks!!!

Answer 1

To display text fully in cell:

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

Answer 2

try adding 'cellclick' listeners

listeners : {   
    'cellclick' : function(grid, rowIndex, columnIndex, e) {
        var record = grid.getStore().getAt(rowIndex);  // Get the Record
        var fieldName = grid.getColumnModel().getDataIndex(columnIndex); // Get field name
        var data = record.get(fieldName);
        newWin(data);
    }
}

or it can be done from renderer also

use ellipsis function of ext in renderer refer ellipsis

var rendererData = function(val,p,rec){
    return '<div onClick=javascript:newWin("'+escape(val)+'");>'+Ext.util.Format.ellipsis(val,50)+'</div>';
}

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