View Full Version : How do I create a Ext JS grid with spanning columns and rows?

21 Dec 2010, 12:31 PM
I would like to create a grid with columns and rows that span using Ext JS's grid. Here's an example mockup of what I want to do:
Here's the HTML I used to create the mockup. It might illustrate the column and row spanning a little better:

<table id="example" border="1">
<td rowspan="2" align="center">Name</td>
<td rowspan="2" align="center">Status</td>
<td rowspan="2" align="center">Role</td>
<td colspan="2" align="center">Assigned</td>
<td align="center">From</td>
<td align="center">To</td>
<td>John Smith</td>
</table>The question is: how do I do this in Ext JS using the grid?

The Grid Column Header Grouping Example seems to help a bit:

http://dev.sencha.com/deploy/dev/examples/grid/ColumnHeaderGroup.html (http://dev.sencha.com/deploy/dev/examples/grid/ColumnHeaderGroup.html)

It gets me part of the way there, in that it allows me to group headers which should effectively be the same as column spanning.

But I'm not sure how to do the row spanning. Is this even possible without having to create my own plugin?

Note: I only need the spanning on the header rows, not the data rows.

Any help would be appreciated. Thanks.

P.S. I'm new to Ext JS. I took a training class a couple months ago but this week is the first time I've actually used Ext JS for real.

14 Jan 2011, 8:42 PM
I had this same question and came upon this thread. You just need to include empty configs {}. The answer is in the original example before the plugin was included in examples/ux. The plugin thread is here: http://www.sencha.com/forum/showthread.php?76322-GroupHeaderGrid-Grouped-grid-column-headers.

Code from Condor's original example:

plugins: [new Ext.ux.plugins.GroupHeaderGrid({
rows: [
{header: 'Before', colspan: 4, align: 'center', dataIndex: 'info1'},
{header: 'After', colspan: 4, align: 'center', dataIndex: 'info2'},
{colspan: 2}
], [
{header: 'Merchandise', colspan: 3, align: 'center'},
{header: 'Merchandise', colspan: 3, align: 'center'},
{header: 'Sum', colspan: 2, align: 'center'}
hierarchicalColMenu: true

15 Jan 2011, 2:23 AM
Hi guys, your posting in the wrong forum.
If you need Ext JS Help post on Ext Help Forum, this is Sencha Touch Forum.