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',
                    
renderToExt.getBody(),
                    
width300,
                    
layout: {
                        
type'table',
                        
columns3,
                    },
                    
style: {overflow'visible'}, //overflow just to see the last cell
                    
bodyStyle: {overflow'visible'},
                    
defaults: {
                        
bodyStyle: {border'1px solid green'},
                        
height50
                    
},
                    
items: [{
                        
colspan3,
                        
width300
                    
},{
                        
colspan2,
                        
width200
                    
}, {
                        
colspan1,
                        
width100
                    
}, {
                        
colspan1,
                        
width100
                    
}, {
                        
colspan2,
                        
width200
                    
}]
                })
            }); 
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">&nbsp; </td>
            </tr>
            <tr>
                <td colspan="2" style="width: 200px;">&nbsp; </td>
                <td colspan="1" style="width: 100px;">&nbsp; </td>
            </tr>
            <tr>
                <td colspan="1" style="width: 100px;">&nbsp; </td>
                <td colspan="2" style="width: 200px;">&nbsp; </td>
            </tr>
        </table>