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
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

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

  3. #3
    Sencha Premium Member Ronaldo's Avatar
    Join Date
    Jul 2007
    Location
    Enschede, The Netherlands
    Posts
    299

    Default

    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:

    Code:
    {
      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

    Code:
    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.
    Attached Images Attached Images
    Ronald van Raaphorst aka Ronaldo
    I'm a freelance software developer in Java, PHP, and ExtJs.


    Skyperonald_twensoc
    Mail[email protected]

  4. #4
    Ext JS Premium Member mcouillard's Avatar
    Join Date
    Jun 2008
    Location
    Bucks County, PA
    Posts
    115

    Default

    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

    Default

    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
  •