Распределить содержимое ячейки сетки ExtJS по нескольким столбцам

Question

Если текст ячейки больше, чем умещается в этой ячейке, возможно ли сделать так, чтобы эта ячейка охватывала более одного столбца?

Например, на данный момент моя сетка выглядит примерно так:

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

Поскольку содержимое 2-го столбца слишком велико, чтобы поместиться в ячейку, содержимое усекается.

Я бы хотел видеть весь текст в столбце «Описание». Таким образом, охватывать ячейки, как показано:

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

Возможно ли это с сеткой ExtJS 4?

Answer 1

Вы можете указать ширину в столбцах, чтобы получить желаемый размер столбца следующим образом:

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

Я сомневаюсь, что вы можете объединить ячейки в сетке extjs4. Но вы можете сделать текст для переноса на следующую строку.

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

Затем включите cls в колонку config

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

Answer 3

Я почти уверен, что это невозможно. Однако вы можете использовать сводный плагин для отображения контента по всей строке.