Span ExtJS grid cell contents across more than one column

Question

If the text of a cell is larger than fits in that cell, is it possible to make that cell span across more than one column?

For example, at the moment my grid looks something like this:

+--------+----------+-----+-----+-----+
|Product |Descrip...|     |     |     |
+--------+----------+-----+-----+-----+

Since the contents of the 2nd column are too large to fit in the cell, the contents are truncated.

I would like to be able to see the whole text for the Description column. Thus span across cells, as shown:

+--------+----------+-----+-----+-----+
|Product |Description of the product  |
+--------+----------+-----+-----+-----+

Is this possible with the ExtJS 4 grid?

Answer 1

You can specify the width in the columns to get the desired column size as follows:

var grid = Ext.create('Ext.grid.Panel',{        
id  : 'example_grid',
columns : [{
id : 'product',
header : 'Product',
width : 50
},{
id : 'description',
header : 'Description of the Product',
width : 150
}]
});

Answer 2

I'm almost sure that this is not possible. However you can use summary plugin to display content across the whole row.

Answer 3

I doubt that you can concatenate cells in extjs4 grid. But you can make text to be carried over to the next line.

.wrapme {
  /** this rule is for css3. **/
  /** You can find crossbrowser workaround on the internet **/
  white-space: pre-wrap;
  word-wrap: break-word;
}

Then include cls into column config

{
  id : 'description',
  header : 'Description of the Product',
  width : 150,
  cls : 'wrapme'
}