Table Layout not respecting number of columns for cells
I'm trying to use a TableLayout to place elements divided into a three column layout, but ExtJs creates only two columns and render the cells in incorrect position.
PHP Code:
Ext.create('Ext.Panel', {
title: 'Teste Table Layout',
renderTo: Ext.getBody(),
width: 300,
layout: {
type: 'table',
columns: 3,
},
style: {overflow: 'visible'}, //overflow just to see the last cell
bodyStyle: {overflow: 'visible'},
defaults: {
bodyStyle: {border: '1px solid green'},
height: 50
},
items: [{
colspan: 3,
width: 300
},{
colspan: 2,
width: 200
}, {
colspan: 1,
width: 100
}, {
colspan: 1,
width: 100
}, {
colspan: 2,
width: 200
}]
})
});
The expected result is like this:
Code:
+------------------+
| |
+-----------+------+
| | |
+-----+-----+------+
| | |
+-----+------------+
But I get something like this:
Code:
+------------------+
| |
+-----------+------+
| | |
+-----+-----+------+-----+
| | | |
+-----+ +------+-----+
To check if that is not an HTML problem I've simulated the layout with a simple Table, as follows:
HTML Code:
<style type="text/css" media="screen">
#t1 {
width: 300px;
}
#t1 td {
height: 50px;
border: 1px solid blue;
}
</style>
<table id="t1">
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="2" style="width: 200px;"> </td>
<td colspan="1" style="width: 100px;"> </td>
</tr>
<tr>
<td colspan="1" style="width: 100px;"> </td>
<td colspan="2" style="width: 200px;"> </td>
</tr>
</table>
