Results 1 to 5 of 5

Thread: How to make a Row span grid with extjs 5 ?

  1. #1

    Default How to make a Row span grid with extjs 5 ?

    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

  2. #2
    Sencha User
    Join Date
    Feb 2013


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

  3. #3
    Sencha Premium Member
    Join Date
    Jul 2007
    Enschede, The Netherlands


    It was kind of tricky, but something like this worked for me using the rowbody feature.
    See 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 =;
        return '<div class="custom-container">'+record.get("SomeDateField") +          
    Now, in the grid's initComponent method, override

    initComponent: function() {
      var me = this;
      // Some other setup
      // 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=\\"" + + "\\"" : ""]} 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>',
    Hope this is what you need.
    Attached Images Attached Images

  4. #4
    Ext JS Premium Member
    Join Date
    Jun 2008
    Bucks County, PA


    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.

  5. #5


    can you explain better

    do you have an example?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts