c1={ title: 'A cell', html: '<p>colspan=1<br/>rowspan=1</p>' }
// This cell spans 2 columns.
c2={ title: 'A cell', html: '<p>colspan=2<br/>rowspan=1</p>', colspan: 2 }
// This cell spans 3 rows.
c3={ title: 'A cell', html: '<p>colspan=1<br/>.<br/>.<br/>.<br/>. 
<br/>.<br/>.<br/>.<br/>.<br/>.<br/>rowspan=3</p>', rowspan: 3 }
c4={ title: 'A cell', html: '<p>rowspan=3<p>' }
// This cell spans 2 rows.
c5={ title: 'A cell', html: 'colspan=1<br/>.<br/>.<br/>.<br/> rowspan=2</p>', rowspan: 2 }
c6={ title: 'A cell', html: '<p>colspan=4<p>' }
c7={ title: 'A cell', html: '<p>colspan=4<p>' }
// This cell does not have the panel header.
c8={ html: 'Plain cell' }

var container=new Ext.Viewport({
layout: 'table',
defaults: {
bodyStyle: 'padding:10px'
},
layoutConfig: {
columns: 4
},
items: [c1,c2,c3,c4,c5,c6,c7,c8]
});