Using the table layout

If you have remained faithful to HTML tables, then you are in luck! Ext JS provides a layout manager—TableLayout—whose basic building concept is conceptually similar to building an HTML table.

This is how you can create a complex table layout with cells that span multiple rows or columns. In the following screenshot, you'll see what the end result looks like:

How to do it...

1. 1. The table cells are built as follows:

   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&lt...