How to make a Row span grid with extjs 5 ?

[yashodasuta]

How to make a Row span grid with extjs 5 ? in extjs 5 version each row is a table. how to implement a grid with row span and colspan feature.
Please share me if you have any ideas

[Gary Schlosberg]

Unfortunately, I don't believe it's possible to merge cells (or rows) in a grid.

[Ronaldo]

It was kind of tricky, but something like this worked for me using the rowbody feature.
See http://try.sencha.com/extjs/4.1.1/do...ure.RowBody.1/ for an example of what the rowbody feature means.

Attached is a screenshot of what I got to work, hope this is what you need.
Note that the rowspan spans 2 rows in the example screenshot, but these 'rows' (<tr> elements) belong to the same record in the grid. What we get is that the last column in the example link is one column spanning 2 rows.

Here's the column definition:

{
  width: 150,
  dataIndex: 'Dummy',
  focusCls: null,
  rowSpan: 2,  // <- Unofficial property, added here
  renderer: function(value, meta, record) {
    var data = record.data;
    return '<div class="custom-container">'+record.get("SomeDateField") +          
     '</div>';
  }
}

Now, in the grid's initComponent method, override

initComponent: function() {
  var me = this;

  // Some other setup
      
  me.callParent(arguments);

  // Here's the trick. The view instance is constructed but not yet completely initialized.
  // The template code is copied, but the bold, red part is added
  // I didn't find another way to change the view's cellTpl for a specific grid/view
  me.view.cellTpl = new Ext.XTemplate([
         '<td <tpl if="column.rowSpan">rowSpan="{column.rowSpan}"</tpl> class="{tdCls}" {tdAttr} {[Ext.aria ? "id=\\"" + Ext.id() + "\\"" : ""]} style="width:{column.cellWidth}px;<tpl if="tdStyle">{tdStyle}</tpl>" tabindex="-1" {ariaCellAttr} data-columnid="{[values.column.getItemId()]}">',
'<div {unselectableAttr} class="' + Ext.baseCSSPrefix + 'grid-cell-inner {innerCls}" ',
'style="text-align:{align};<tpl if="style">{style}</tpl>" {ariaCellInnerAttr}>{value}</div>',
'</td>'
]);
},

Hope this is what you need.

[mcouillard]

I've done this in Ext6 classic without a rowBody. Within a cell renderer you set the meta.tdAttr to use a rowspan="x". Also increase the cell width on meta.tdStyle (applied to the inner div). Then css display:none the subsequent cells. Likely works best (or only) with non-flex column widths.

It's working better than I expected, perhaps partly thanks to the DOM simplification Ext6 has received.

[ricko.brz]

can you explain better

do you have an example?