View Full Version : GridPanel row spanning (well, sort of...)

1 Jul 2010, 11:27 PM
The current GridPanel implementation doesn't support row spanning, because the rows aren't part of the same table.

The only thing you can do is make the grid look like it has row spanning by changing the css.


<style type="text/css">
.grid-row-span .x-grid3-row {
border-bottom: 0;
.grid-row-span .x-grid3-col {
border-bottom: 1px solid #ededed;
.grid-row-span .row-span {
border-bottom: 1px solid #fff;
.grid-row-span .row-span-first {
position: relative;
.grid-row-span .row-span-first .x-grid3-cell-inner {
position: absolute;
.grid-row-span .row-span-last {
border-bottom: 1px solid #ededed;
<script type="text/javascript">
new Ext.Viewport({
layout: 'fit',
items: {
xtype: 'grid',
store: new Ext.data.ArrayStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
{name: 'industry'}
data: [
['3m Co',71.72,0.02,0.03,'4/2 12:00am', 'Manufacturing'],
['Alcoa Inc',29.01,0.42,1.47,'4/1 12:00am', 'Manufacturing'],
['Altria Group Inc',83.81,0.28,0.34,'4/3 12:00am', 'Manufacturing'],
['American Express Company',52.55,0.01,0.02,'4/8 12:00am', 'Finance'],
['American International Group, Inc.',64.13,0.31,0.49,'4/1 12:00am', 'Services'],
['AT&amp;T Inc.',31.61,-0.48,-1.54,'4/8 12:00am', 'Services'],
['Boeing Co.',75.43,0.53,0.71,'4/8 12:00am', 'Manufacturing'],
['Caterpillar Inc.',67.27,0.92,1.39,'4/1 12:00am', 'Services'],
['Citigroup, Inc.',49.37,0.02,0.04,'4/4 12:00am', 'Finance'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'4/1 12:00am', 'Manufacturing'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'4/3 12:00am', 'Manufacturing'],
['General Electric Company',34.14,-0.08,-0.23,'4/3 12:00am', 'Manufacturing'],
['General Motors Corporation',30.27,1.09,3.74,'4/3 12:00am', 'Automotive'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'4/3 12:00am', 'Computer'],
['Honeywell Intl Inc',38.77,0.05,0.13,'4/3 12:00am', 'Manufacturing'],
['Intel Corporation',19.88,0.31,1.58,'4/2 12:00am', 'Computer'],
['International Business Machines',81.41,0.44,0.54,'4/1 12:00am', 'Computer'],
['Johnson &amp; Johnson',64.72,0.06,0.09,'4/2 12:00am', 'Medical'],
['JP Morgan &amp; Chase &amp; Co',45.73,0.07,0.15,'4/2 12:00am', 'Finance'],
['McDonald\'s Corporation',36.76,0.86,2.40,'4/2 12:00am', 'Food'],
['Merck &amp; Co., Inc.',40.96,0.41,1.01,'4/2 12:00am', 'Medical'],
['Microsoft Corporation',25.84,0.14,0.54,'4/2 12:00am', 'Computer'],
['Pfizer Inc',27.96,0.4,1.45,'4/8 12:00am', 'Services', 'Medical'],
['The Coca-Cola Company',45.07,0.26,0.58,'4/1 12:00am', 'Food'],
['The Home Depot, Inc.',34.64,0.35,1.02,'4/8 12:00am', 'Retail'],
['The Procter &amp; Gamble Company',61.91,0.01,0.02,'4/1 12:00am', 'Manufacturing'],
['United Technologies Corporation',63.26,0.55,0.88,'4/1 12:00am', 'Computer'],
['Verizon Communications',35.57,0.39,1.11,'4/3 12:00am', 'Services'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'4/3 12:00am', 'Retail'],
['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'4/1 12:00am', 'Services']
sortInfo: {
field: 'industry',
direction: 'ASC'
cls: 'grid-row-span',
columns: [
{header: "Industry", width: 200, sortable: true, renderer: function (value, meta, record, rowIndex, colIndex, store) {
var first = !rowIndex || value !== store.getAt(rowIndex - 1).get('industry'),
last = rowIndex >= store.getCount() - 1 || value !== store.getAt(rowIndex + 1).get('industry');
meta.css += 'row-span' + (first ? ' row-span-first' : '') + (last ? ' row-span-last' : '');
if (first) {
var i = rowIndex + 1;
while (i < store.getCount() && value === store.getAt(i).get('industry')) {
var rowHeight = 20, padding = 6,
height = (rowHeight * (i - rowIndex) - padding) + 'px';
meta.attr = 'style="height:' + height + ';line-height:' + height + ';"';
return first ? value : '';
}, dataIndex: 'industry'},
{header: "Company", width: 300, sortable: true, dataIndex: 'company'},
{header: "Price", width: 100, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 100, sortable: true, dataIndex: 'change', renderer: Ext.util.Format.usMoney},
{header: "Last Updated", width: 100, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
columnLines: true

1 Aug 2012, 12:39 AM
My requirement is to edit the multiple rows at a time in grid( without saving the each row after editing it)....

I need to allow the user to save all the changes in the grid with a save/update button ....
(button was at the end of the grid in bbar)

(I 'm using ExtJS4.0.1)

Thnx in advance!

11 Mar 2013, 1:36 AM
Hi Condor/Aditya,
Could you guys post the example here or mail it to me. I am trying to create a similar editor grid, but i am facing a lot of problem.


3 May 2013, 5:10 AM
I see a great example on how to do row spanning but I would like some help on cell spanning. I have a single row that needs to span across all cells. Is there anyway to do that. Attached is a screenshot.

13 Mar 2014, 1:48 AM
This is working but there is one problem. Since
.x-grid3-cell-inner is applied
position:absolute the
forcefit functionality stops working for that cell.

Check this picture.48276

As you can see, event column's cell has lost forceFit since for its cells position : absolute is applied.

Any idea how it can be achieved ?
I have also asked this question in following stackoverflow question in comment section.